From 48be2f38923738fe4e401df641519a788df8aa51 Mon Sep 17 00:00:00 2001
From: hextion <100ishundred@gmail.com>
Date: Thu, 2 Oct 2025 10:03:53 +0300
Subject: [PATCH 1/7] feat(button): added BaseButtonCandidate

---
 .../src/__snapshots__/Component.test.tsx.snap |   4 +-
 packages/button/src/Component.responsive.tsx  |   4 +-
 packages/button/src/Component.test.tsx        |  41 +-
 .../src/__snapshots__/Component.test.tsx.snap |  44 +-
 .../base-button-candidate/Component.tsx       |  81 ++
 .../base-button-candidate/index.module.css    |  52 +
 .../components/base-button-candidate/index.ts |   2 +
 .../components/base-button-candidate/types.ts |  86 ++
 .../src/components/base-button/Component.tsx  | 237 ++---
 .../components/base-button/default.module.css | 224 ++--
 .../components/base-button/index.module.css   | 318 ++----
 .../base-button/inverted.module.css           | 220 ++--
 .../components/button-component/Component.tsx |  50 +
 .../button-component/index.module.css         |  16 +
 .../src/components/button-component/index.ts  |   1 +
 .../button/src/desktop/Component.desktop.tsx  |  10 +-
 .../src/desktop/default.desktop.module.css    | 116 ++-
 .../button/src/desktop/desktop.module.css     |  36 +-
 .../src/desktop/inverted.desktop.module.css   | 117 ++-
 .../button/src/mobile/Component.mobile.tsx    |  10 +-
 .../src/mobile/default.mobile.module.css      | 110 +-
 .../src/mobile/inverted.mobile.module.css     | 110 +-
 packages/button/src/mobile/mobile.module.css  |  36 +-
 packages/button/src/shared/hooks.ts           |  32 +
 packages/button/src/shared/index.ts           |   1 +
 packages/button/src/typings.ts                | 104 +-
 packages/button/src/vars.css                  |   3 +
 .../src/__snapshots__/Component.test.tsx.snap | 260 ++---
 .../src/__snapshots__/Component.test.tsx.snap | 128 +--
 .../src/__snapshots__/Component.test.tsx.snap | 956 +++++++++---------
 .../__snapshots__/Component.test.tsx.snap     |  16 +-
 .../src/__snapshots__/Component.test.tsx.snap |   4 +-
 .../src/__snapshots__/Component.test.tsx.snap |  12 +-
 .../src/__snapshots__/Component.test.tsx.snap |  90 +-
 .../src/Component.test.tsx                    |   4 +-
 .../src/__snapshots__/Component.test.tsx.snap |  72 +-
 .../src/__snapshots__/Component.test.tsx.snap |  18 +-
 .../src/__snapshots__/Component.test.tsx.snap |  18 +-
 .../src/__snapshots__/Component.test.tsx.snap |  12 +-
 .../src/__snapshots__/Component.test.tsx.snap |  16 +-
 .../src/__snapshots__/Component.test.tsx.snap |   8 +-
 .../src/__snapshots__/component.test.tsx.snap |  12 +-
 .../src/__snapshots__/Component.test.tsx.snap |   4 +-
 .../src/__snapshots__/component.test.tsx.snap | 136 +--
 .../src/__snapshots__/component.test.tsx.snap |  88 +-
 .../src/__snapshots__/component.test.tsx.snap |   4 +-
 packages/picker-button/src/Component.test.tsx |   4 +-
 .../src/__snapshots__/Component.test.tsx.snap |  36 +-
 packages/plate/src/Component.test.tsx         |   6 +-
 .../src/__snapshots__/Component.test.tsx.snap |  16 +-
 packages/vars/src/mixins.css                  |  13 +
 51 files changed, 2061 insertions(+), 1937 deletions(-)
 create mode 100644 packages/button/src/components/base-button-candidate/Component.tsx
 create mode 100644 packages/button/src/components/base-button-candidate/index.module.css
 create mode 100644 packages/button/src/components/base-button-candidate/index.ts
 create mode 100644 packages/button/src/components/base-button-candidate/types.ts
 create mode 100644 packages/button/src/components/button-component/Component.tsx
 create mode 100644 packages/button/src/components/button-component/index.module.css
 create mode 100644 packages/button/src/components/button-component/index.ts
 create mode 100644 packages/button/src/shared/hooks.ts

diff --git a/packages/attach/src/__snapshots__/Component.test.tsx.snap b/packages/attach/src/__snapshots__/Component.test.tsx.snap
index e6274801c6..beeae5e8c4 100644
--- a/packages/attach/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/attach/src/__snapshots__/Component.test.tsx.snap
@@ -6,11 +6,11 @@ exports[`Attach Snapshots tests should match snapshot 1`] = `
     class="component size-48"
   >
     <button
-      class="component secondary size-48 hug size-48 component secondary component secondary withLeftAddons"
+      class="component component component component component secondary secondary secondary size48 hug size48 defaultPaddings defaultWidth minHeight component"
       type="button"
     >
       <span
-        class="addons"
+        class="addon"
       >
         <svg
           class="icon"
diff --git a/packages/button/src/Component.responsive.tsx b/packages/button/src/Component.responsive.tsx
index 88b7744f36..aa8883e037 100644
--- a/packages/button/src/Component.responsive.tsx
+++ b/packages/button/src/Component.responsive.tsx
@@ -4,9 +4,9 @@ import { useIsDesktop } from '@alfalab/core-components-mq';
 
 import { ButtonDesktop } from './desktop';
 import { ButtonMobile } from './mobile';
-import { type ButtonProps } from './typings';
+import { type ButtonProps, type ButtonRef } from './typings';
 
-export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonProps>(
+export const Button = forwardRef<ButtonRef, ButtonProps>(
     (
         {
             children,
diff --git a/packages/button/src/Component.test.tsx b/packages/button/src/Component.test.tsx
index 8f2c19c39e..0cf36e5a4d 100644
--- a/packages/button/src/Component.test.tsx
+++ b/packages/button/src/Component.test.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEvent, useState, FC, forwardRef } from 'react';
+import React, { MouseEvent, useState, FC, forwardRef, useRef } from 'react';
 import {
     render,
     fireEvent,
@@ -100,9 +100,9 @@ describe('Button', () => {
             expect(container.firstElementChild).toHaveAttribute('disabled');
         });
 
-        it('should set disabled attribute to <a>', () => {
+        it('should set `aria-disabled` attribute to <a>', () => {
             const { container } = render(<Button href='test' disabled={true} />);
-            expect(container.firstElementChild).toHaveAttribute('disabled');
+            expect(container.firstElementChild).toHaveAttribute('aria-disabled', 'true');
         });
     });
 
@@ -130,7 +130,7 @@ describe('Button', () => {
             const size = 56;
             const { container } = render(<Button size={size} />);
 
-            expect(container.firstElementChild).toHaveClass(`size-${size}`);
+            expect(container.firstElementChild).toHaveClass(`size${size}`);
         });
 
         it('should set `block` class', () => {
@@ -146,10 +146,10 @@ describe('Button', () => {
             expect(container.firstElementChild).toHaveClass(view);
         });
 
-        it('should set `iconOnly` class', () => {
+        it("shouldn't set `defaultWidth` class", () => {
             const { container } = render(<Button />);
 
-            expect(container.firstElementChild).toHaveClass('iconOnly');
+            expect(container.firstElementChild).not.toHaveClass('defaultWidth');
         });
 
         it('should set `nowrap` class', () => {
@@ -179,7 +179,7 @@ describe('Button', () => {
         it('should set `allowBackdropBlur` class', () => {
             const { container } = render(<Button allowBackdropBlur={true} />);
 
-            expect(container.firstElementChild).toHaveClass('allowBackdropBlur');
+            expect(container.firstElementChild).toHaveClass('blurred');
         });
     });
 
@@ -260,11 +260,12 @@ describe('Button', () => {
             );
 
             const button = getByTestId(dataTestId);
-            const getLoader = () => container.querySelector('svg');
+            const getLoader = () =>
+                container.querySelector(`[data-test-id=${getButtonTestIds(dataTestId).spinner}]`);
 
             const start = Date.now();
 
-            await fireEvent.click(button);
+            fireEvent.click(button);
 
             await waitFor(() => expect(getLoader()).toBeInTheDocument());
 
@@ -283,7 +284,8 @@ describe('Button', () => {
             );
 
             const button = getByTestId(dataTestId);
-            const getLoader = () => container.querySelector('svg');
+            const getLoader = () =>
+                container.querySelector(`[data-test-id=${getButtonTestIds(dataTestId).spinner}]`);
 
             const start = Date.now();
 
@@ -312,18 +314,21 @@ describe('Button', () => {
             expect(props['data-test-id']).toBe(dataTestId);
         });
 
-        it('should pass `to` instead `href` to custom component', () => {
-            const cb = jest.fn();
-            cb.mockReturnValue(null);
+        it('should pass `href` to custom component', () => {
+            expect.assertions(1);
 
-            render(<Button Component={forwardRef(cb)} href='test' />);
+            const CustomComponent = forwardRef<HTMLElement, { href?: string }>((props, _) => {
+                const firstRenderRef = useRef(true);
 
-            expect(cb).toHaveBeenCalled();
+                if (firstRenderRef.current) {
+                    firstRenderRef.current = false;
+                    expect(props).toEqual(expect.objectContaining({ href: 'test' }));
+                }
 
-            const props = cb.mock.calls[0][0];
+                return null;
+            });
 
-            expect(props.href).toBeFalsy();
-            expect(props.to).toBe('test');
+            render(<Button Component={CustomComponent} href='test' />);
         });
     });
 
diff --git a/packages/button/src/__snapshots__/Component.test.tsx.snap b/packages/button/src/__snapshots__/Component.test.tsx.snap
index f2ca6b722f..17817c60c8 100644
--- a/packages/button/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/button/src/__snapshots__/Component.test.tsx.snap
@@ -6,14 +6,14 @@ exports[`Button Snapshots tests should match snapshot 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary iconOnly"
+        class="component component component component component secondary secondary secondary size56 hug size56 minWidth minHeight component"
         type="button"
       />
     </div>
   </body>,
   "container": <div>
     <button
-      class="component secondary size-56 hug size-56 component secondary component secondary iconOnly"
+      class="component component component component component secondary secondary secondary size56 hug size56 minWidth minHeight component"
       type="button"
     />
   </div>,
@@ -77,14 +77,16 @@ exports[`Button Snapshots tests should render anchor if href pass 1`] = `
   "baseElement": <body>
     <div>
       <a
-        class="component secondary size-56 hug size-56 component secondary component secondary iconOnly"
+        aria-disabled="false"
+        class="component component component component component secondary secondary secondary size56 hug size56 minWidth minHeight component"
         href="https://some-url"
       />
     </div>
   </body>,
   "container": <div>
     <a
-      class="component secondary size-56 hug size-56 component secondary component secondary iconOnly"
+      aria-disabled="false"
+      class="component component component component component secondary secondary secondary size56 hug size56 minWidth minHeight component"
       href="https://some-url"
     />
   </div>,
@@ -148,14 +150,14 @@ exports[`Button Snapshots tests should render button by default 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary iconOnly"
+        class="component component component component component secondary secondary secondary size56 hug size56 minWidth minHeight component"
         type="button"
       />
     </div>
   </body>,
   "container": <div>
     <button
-      class="component secondary size-56 hug size-56 component secondary component secondary iconOnly"
+      class="component component component component component secondary secondary secondary size56 hug size56 minWidth minHeight component"
       type="button"
     />
   </div>,
@@ -219,11 +221,11 @@ exports[`Button Snapshots tests should render left addons 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary iconOnly"
+        class="component component component component component secondary secondary secondary size56 hug size56 minWidth minHeight component"
         type="button"
       >
         <span
-          class="addons"
+          class="addon"
         >
           <div>
             Left addons
@@ -234,11 +236,11 @@ exports[`Button Snapshots tests should render left addons 1`] = `
   </body>,
   "container": <div>
     <button
-      class="component secondary size-56 hug size-56 component secondary component secondary iconOnly"
+      class="component component component component component secondary secondary secondary size56 hug size56 minWidth minHeight component"
       type="button"
     >
       <span
-        class="addons"
+        class="addon"
       >
         <div>
           Left addons
@@ -306,9 +308,8 @@ exports[`Button Snapshots tests should render loader if loading & href pass 1`]
   "baseElement": <body>
     <div>
       <a
-        class="component secondary size-56 hug size-56 component secondary component secondary iconOnly loading"
-        disabled=""
-        href="https://some-url"
+        aria-disabled="true"
+        class="component loading disabled disabled disabled component component component component secondary secondary secondary size56 hug size56 minWidth minHeight loading loading loading component"
       >
         <svg
           class="spinner component preset24 loader loader loader visible"
@@ -351,9 +352,8 @@ exports[`Button Snapshots tests should render loader if loading & href pass 1`]
   </body>,
   "container": <div>
     <a
-      class="component secondary size-56 hug size-56 component secondary component secondary iconOnly loading"
-      disabled=""
-      href="https://some-url"
+      aria-disabled="true"
+      class="component loading disabled disabled disabled component component component component secondary secondary secondary size56 hug size56 minWidth minHeight loading loading loading component"
     >
       <svg
         class="spinner component preset24 loader loader loader visible"
@@ -453,7 +453,7 @@ exports[`Button Snapshots tests should render loader if loading pass 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary iconOnly loading"
+        class="component loading component component component component secondary secondary secondary size56 hug size56 minWidth minHeight loading loading loading component"
         disabled=""
         type="button"
       >
@@ -498,7 +498,7 @@ exports[`Button Snapshots tests should render loader if loading pass 1`] = `
   </body>,
   "container": <div>
     <button
-      class="component secondary size-56 hug size-56 component secondary component secondary iconOnly loading"
+      class="component loading component component component component secondary secondary secondary size56 hug size56 minWidth minHeight loading loading loading component"
       disabled=""
       type="button"
     >
@@ -600,11 +600,11 @@ exports[`Button Snapshots tests should render right addons 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary iconOnly"
+        class="component component component component component secondary secondary secondary size56 hug size56 minWidth minHeight component"
         type="button"
       >
         <span
-          class="addons"
+          class="addon"
         >
           <div>
             Right addons
@@ -615,11 +615,11 @@ exports[`Button Snapshots tests should render right addons 1`] = `
   </body>,
   "container": <div>
     <button
-      class="component secondary size-56 hug size-56 component secondary component secondary iconOnly"
+      class="component component component component component secondary secondary secondary size56 hug size56 minWidth minHeight component"
       type="button"
     >
       <span
-        class="addons"
+        class="addon"
       >
         <div>
           Right addons
diff --git a/packages/button/src/components/base-button-candidate/Component.tsx b/packages/button/src/components/base-button-candidate/Component.tsx
new file mode 100644
index 0000000000..95e9cf1f2e
--- /dev/null
+++ b/packages/button/src/components/base-button-candidate/Component.tsx
@@ -0,0 +1,81 @@
+import React, { forwardRef, type MouseEventHandler, useRef } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+
+import { getDataTestId } from '@alfalab/core-components-shared';
+import { Spinner } from '@alfalab/core-components-spinner';
+import { useFocus } from '@alfalab/hooks';
+
+import { ButtonComponent } from '../button-component';
+
+import { type BaseButtonCandidateProps } from './types';
+
+import styles from './index.module.css';
+
+export const BaseButtonCandidate = forwardRef<HTMLElement, BaseButtonCandidateProps>(
+    (
+        {
+            children,
+            block,
+            className,
+            loaderClassName,
+            disabledClassName,
+            dataTestId,
+            loading,
+            Component = ButtonComponent,
+            disabled: disabledFromProps,
+            type,
+            onClick,
+            href,
+            ...restProps
+        },
+        ref,
+    ) => {
+        const buttonRef = useRef<HTMLElement>(null);
+        const [focused] = useFocus(buttonRef, 'keyboard');
+        const disabled = disabledFromProps || loading;
+        const passDisabledClassName = disabled && typeof href === 'string';
+
+        const handleClick: MouseEventHandler<HTMLElement> = (event) => {
+            if (disabled) {
+                event.preventDefault();
+                event.stopPropagation();
+            } else {
+                onClick?.(event);
+            }
+        };
+
+        return (
+            <Component
+                data-test-id={dataTestId}
+                {...restProps}
+                href={href}
+                className={cn(
+                    styles.component,
+                    {
+                        [styles.focused]: focused,
+                        [styles.block]: block,
+                        [styles.loading]: loading,
+                    },
+                    passDisabledClassName && [styles.disabled, disabledClassName],
+                    className,
+                )}
+                // @ts-expect-error anchor's type and button's type are not compatible
+                type={type}
+                disabled={disabled}
+                onClick={handleClick}
+                ref={mergeRefs([buttonRef, ref])}
+            >
+                {children}
+                {loading && (
+                    <Spinner
+                        preset={24}
+                        visible={true}
+                        dataTestId={getDataTestId(dataTestId, 'loader')}
+                        className={cn(styles.loader, loaderClassName)}
+                    />
+                )}
+            </Component>
+        );
+    },
+);
diff --git a/packages/button/src/components/base-button-candidate/index.module.css b/packages/button/src/components/base-button-candidate/index.module.css
new file mode 100644
index 0000000000..d3d2f90b63
--- /dev/null
+++ b/packages/button/src/components/base-button-candidate/index.module.css
@@ -0,0 +1,52 @@
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
+
+.component {
+    @mixin reset-tap-highlight-color;
+
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    position: relative;
+
+    transition:
+        background 0.2s ease,
+        border 0.2s ease,
+        color 0.2s ease;
+
+    /* Block */
+
+    &.block {
+        display: flex;
+        width: 100%;
+    }
+
+    /* Focus */
+
+    &.focused {
+        @mixin focus-outline;
+    }
+
+    /* Loading */
+
+    .loader {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        translate: -50% -50%;
+    }
+
+    &.loading > *:not(.loader) {
+        opacity: 0;
+    }
+
+    /* Disabled */
+
+    @mixin disabled {
+        cursor: var(--disabled-cursor);
+
+        & * {
+            pointer-events: none;
+        }
+    }
+}
diff --git a/packages/button/src/components/base-button-candidate/index.ts b/packages/button/src/components/base-button-candidate/index.ts
new file mode 100644
index 0000000000..6620b588d7
--- /dev/null
+++ b/packages/button/src/components/base-button-candidate/index.ts
@@ -0,0 +1,2 @@
+export { BaseButtonCandidate } from './Component';
+export * from './types';
diff --git a/packages/button/src/components/base-button-candidate/types.ts b/packages/button/src/components/base-button-candidate/types.ts
new file mode 100644
index 0000000000..c2d969262b
--- /dev/null
+++ b/packages/button/src/components/base-button-candidate/types.ts
@@ -0,0 +1,86 @@
+import {
+    type AnchorHTMLAttributes,
+    type ButtonHTMLAttributes,
+    type ComponentType,
+    type ForwardRefExoticComponent,
+    type RefAttributes,
+} from 'react';
+
+export interface DisableAttributes {
+    /**
+     * Заблокировать кнопку
+     */
+    disabled?: boolean;
+}
+
+export interface MaybeAnchorAttributes<T extends string | undefined> {
+    /**
+     * Выводит ссылку в виде кнопки
+     */
+    href?: T;
+}
+
+export type ButtonComponentProps = DisableAttributes &
+    (AnchorHTMLAttributes<HTMLElement> | ButtonHTMLAttributes<HTMLElement>);
+
+export interface ComponentProps extends DisableAttributes {
+    /**
+     * Растягивает компонент на ширину контейнера
+     * @default false
+     */
+    block?: boolean;
+
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+
+    /**
+     * Дополнительный класс для лоадера
+     */
+    loaderClassName?: string;
+
+    /**
+     * Дополнительный класc при отключении кнопки
+     */
+    disabledClassName?: string;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     * Для лоадера используется постфикс `${dataTestId}-loader`
+     */
+    dataTestId?: string;
+
+    /**
+     * Показать лоадер
+     * @default false
+     */
+    loading?: boolean;
+
+    /**
+     * Кастомный компонент для кнопки
+     */
+    Component?:
+        | ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>
+        | ComponentType<ButtonHTMLAttributes<HTMLButtonElement>>
+        | ComponentType<ButtonComponentProps>
+        | ForwardRefExoticComponent<
+              AnchorHTMLAttributes<HTMLAnchorElement> & RefAttributes<HTMLAnchorElement>
+          >
+        | ForwardRefExoticComponent<
+              ButtonHTMLAttributes<HTMLButtonElement> & RefAttributes<HTMLButtonElement>
+          >
+        | ForwardRefExoticComponent<ButtonComponentProps & RefAttributes<HTMLElement>>;
+}
+
+interface AnchorLikeProps
+    extends MaybeAnchorAttributes<string>,
+        ComponentProps,
+        Omit<AnchorHTMLAttributes<HTMLElement>, keyof ComponentProps> {}
+
+interface ButtonLikeProps
+    extends MaybeAnchorAttributes<undefined>,
+        ComponentProps,
+        Omit<ButtonHTMLAttributes<HTMLElement>, keyof ComponentProps> {}
+
+export type BaseButtonCandidateProps = AnchorLikeProps | ButtonLikeProps;
diff --git a/packages/button/src/components/base-button/Component.tsx b/packages/button/src/components/base-button/Component.tsx
index 7aaffb248f..602e9f63b6 100644
--- a/packages/button/src/components/base-button/Component.tsx
+++ b/packages/button/src/components/base-button/Component.tsx
@@ -1,21 +1,10 @@
-/* eslint-disable complexity */
-import React, {
-    type AnchorHTMLAttributes,
-    type ButtonHTMLAttributes,
-    forwardRef,
-    useEffect,
-    useRef,
-    useState,
-} from 'react';
-import mergeRefs from 'react-merge-refs';
+import React, { Children, forwardRef } from 'react';
 import cn from 'classnames';
 
-import { getDataTestId } from '@alfalab/core-components-shared';
-import { Spinner } from '@alfalab/core-components-spinner';
-import { useFocus } from '@alfalab/hooks';
-
-import { LOADER_MIN_DISPLAY_INTERVAL } from '../../constants/loader-min-display-interval';
-import { type CommonButtonProps, type PrivateButtonProps } from '../../typings';
+import { useLoading } from '../../shared';
+import { type ButtonRef, type CommonButtonProps, type PrivateButtonProps } from '../../typings';
+import { BaseButtonCandidate } from '../base-button-candidate';
+import { ButtonComponent } from '../button-component';
 
 import defaultColors from './default.module.css';
 import commonStyles from './index.module.css';
@@ -24,12 +13,9 @@ import invertedColors from './inverted.module.css';
 const colorStyles = {
     default: defaultColors,
     inverted: invertedColors,
-};
+} as const;
 
-export const BaseButton = forwardRef<
-    HTMLAnchorElement | HTMLButtonElement,
-    CommonButtonProps & PrivateButtonProps
->(
+export const BaseButton = forwardRef<ButtonRef, CommonButtonProps & PrivateButtonProps>(
     (
         {
             allowBackdropBlur,
@@ -41,81 +27,81 @@ export const BaseButton = forwardRef<
             leftAddons,
             rightAddons,
             size = 56,
-            block = false,
-            className,
+            className: classNameFromProps,
             spinnerClassName,
-            dataTestId,
-            href,
-            loading = false,
-            nowrap = false,
+            loaderClassName = spinnerClassName,
+            loading: loadingFromProps,
+            nowrap,
             colors = 'default',
-            Component = href ? 'a' : 'button',
-            onClick,
+            Component = ButtonComponent,
             styles = {},
             colorStylesMap = { default: {}, inverted: {} },
+            disabled,
             ...restProps
         },
         ref,
     ) => {
-        const buttonRef = useRef<HTMLElement>(null);
-
-        const [focused] = useFocus(buttonRef, 'keyboard');
-
-        const [loaderTimePassed, setLoaderTimePassed] = useState(true);
-
-        const timerId = useRef(0);
-
-        const showLoader = loading || !loaderTimePassed;
-
-        const showHint = hint && [56, 64, 72].includes(size);
-
-        const iconOnly = !children;
-
-        const sizeStyle = `size-${size}`;
-
-        const componentProps = {
-            className: cn(
-                commonStyles.component,
-                commonStyles[view],
-                commonStyles[sizeStyle],
-                commonStyles[textResizing],
-                shape === 'rectangular' && styles[sizeStyle],
-                shape === 'rounded' && commonStyles[shape],
-                colorStyles[colors].component,
-                colorStyles[colors][view],
-                colorStylesMap[colors].component,
-                {
-                    [commonStyles.allowBackdropBlur]: allowBackdropBlur,
-                    [colorStylesMap[colors][view]]: Boolean(colorStylesMap[colors][view]),
-                    [commonStyles.focused]: focused,
-                    [commonStyles.block]: block,
-                    [commonStyles.iconOnly]: iconOnly,
-                    [commonStyles.loading]: showLoader,
-                    [commonStyles.withRightAddons]: Boolean(rightAddons) && !iconOnly,
-                    [commonStyles.withLeftAddons]: Boolean(leftAddons) && !iconOnly,
-                    [colorStyles[colors].loading]: showLoader,
-                    [colorStylesMap[colors].loading]: showLoader,
-                },
-                className,
-            ),
-            'data-test-id': dataTestId || null,
-        };
-
-        const {
-            disabled,
-            type = 'button',
-            ...restButtonProps
-        } = restProps as ButtonHTMLAttributes<HTMLButtonElement>;
+        const loading = useLoading(loadingFromProps);
+        const hasLabel = Children.toArray(children).length > 0;
+        const showHint = size >= 56 && Children.toArray(hint).length > 0;
+        const sizeStyle = `size${size}`;
+        const blurred =
+            allowBackdropBlur &&
+            (view === 'secondary' || (disabled && (view === 'accent' || view === 'primary')));
+
+        const className = cn(
+            commonStyles.component,
+            colorStyles[colors].component,
+            styles.component,
+            colorStylesMap[colors].component,
+            commonStyles[view],
+            colorStyles[colors][view],
+            colorStylesMap[colors][view],
+            commonStyles[sizeStyle],
+            commonStyles[textResizing],
+            {
+                [commonStyles[shape]]: shape === 'rounded',
+                [styles[sizeStyle]]: shape === 'rectangular',
+                [commonStyles.defaultPaddings]: hasLabel && view !== 'text',
+                [commonStyles.defaultWidth]: hasLabel && view !== 'text' && view !== 'transparent',
+                [commonStyles.minWidth]: !hasLabel && view !== 'text',
+                [commonStyles.minHeight]: view !== 'text',
+                [commonStyles.blurred]: blurred,
+            },
+            loading && [
+                commonStyles.loading,
+                colorStyles[colors].loading,
+                colorStylesMap[colors].loading,
+            ],
+            classNameFromProps,
+        );
 
-        const buttonChildren = (
-            <React.Fragment>
-                {leftAddons && <span className={commonStyles.addons}>{leftAddons}</span>}
-                {children && (
+        return (
+            <BaseButtonCandidate
+                {...restProps}
+                ref={ref}
+                className={className}
+                Component={Component}
+                loading={loading}
+                loaderClassName={cn(
+                    colorStyles[colors].loader,
+                    colorStylesMap[colors].loader,
+                    loaderClassName,
+                )}
+                disabled={disabled}
+                disabledClassName={cn(
+                    colorStylesMap[colors].disabled,
+                    colorStyles[colors].disabled,
+                )}
+            >
+                {Children.toArray(leftAddons).length > 0 && (
+                    <span className={commonStyles.addon}>{leftAddons}</span>
+                )}
+                {hasLabel && (
                     <span
                         className={cn(commonStyles.label, {
                             [commonStyles.nowrap]: nowrap,
-                            [commonStyles.stretchText]:
-                                !(leftAddons || rightAddons) || textResizing === 'fill',
+                            [commonStyles.stretchText]: textResizing === 'fill',
                         })}
                     >
                         {children}
@@ -132,87 +118,10 @@ export const BaseButton = forwardRef<
                         )}
                     </span>
                 )}
-
-                {showLoader && (
-                    <Spinner
-                        preset={24}
-                        dataTestId={getDataTestId(dataTestId, 'loader')}
-                        visible={true}
-                        className={cn(
-                            commonStyles.loader,
-                            colorStyles[colors].loader,
-                            colorStylesMap[colors].loader,
-                            spinnerClassName,
-                        )}
-                    />
+                {Children.toArray(rightAddons).length > 0 && (
+                    <span className={commonStyles.addon}>{rightAddons}</span>
                 )}
-
-                {rightAddons && <span className={commonStyles.addons}>{rightAddons}</span>}
-            </React.Fragment>
-        );
-
-        useEffect(() => {
-            if (loading) {
-                setLoaderTimePassed(false);
-
-                timerId.current = window.setTimeout(() => {
-                    setLoaderTimePassed(true);
-                }, LOADER_MIN_DISPLAY_INTERVAL);
-            }
-        }, [loading]);
-
-        useEffect(
-            () => () => {
-                window.clearTimeout(timerId.current);
-            },
-            [],
-        );
-
-        const handleClick = (
-            e: React.MouseEvent<HTMLAnchorElement, MouseEvent> &
-                React.MouseEvent<HTMLButtonElement, MouseEvent>,
-        ) => {
-            if (disabled || showLoader) {
-                e.preventDefault();
-                e.stopPropagation();
-
-                return;
-            }
-            onClick?.(e);
-        };
-
-        if (href) {
-            const { target } = restProps as AnchorHTMLAttributes<HTMLAnchorElement>;
-
-            // Для совместимости с react-router-dom, меняем href на to
-            const hrefProps = { [typeof Component === 'string' ? 'href' : 'to']: href };
-
-            return (
-                <Component
-                    rel={target === '_blank' ? 'noreferrer noopener' : undefined}
-                    {...componentProps}
-                    {...(restProps as AnchorHTMLAttributes<HTMLAnchorElement>)}
-                    {...hrefProps}
-                    onClick={handleClick}
-                    disabled={disabled || showLoader}
-                    ref={mergeRefs([buttonRef, ref])}
-                >
-                    {buttonChildren}
-                </Component>
-            );
-        }
-
-        return (
-            <Component
-                {...componentProps}
-                {...restButtonProps}
-                onClick={handleClick}
-                type={type}
-                disabled={disabled || showLoader}
-                ref={mergeRefs([buttonRef, ref])}
-            >
-                {buttonChildren}
-            </Component>
+            </BaseButtonCandidate>
         );
     },
 );
diff --git a/packages/button/src/components/base-button/default.module.css b/packages/button/src/components/base-button/default.module.css
index 58a03d5256..8f71cbe0e5 100644
--- a/packages/button/src/components/base-button/default.module.css
+++ b/packages/button/src/components/base-button/default.module.css
@@ -1,153 +1,161 @@
 @import '../../vars.css';
 
-.accent {
-    color: var(--button-accent-color);
-    background-color: var(--button-accent-base-bg-color);
-    border: 1px solid transparent;
+.component {
+    &.accent {
+        color: var(--button-accent-color);
+        background-color: var(--button-accent-base-bg-color);
+        border: var(--button-border-width) solid transparent;
+
+        @mixin not-disabled {
+            @mixin hover {
+                background-color: var(--button-accent-hover-bg-color);
+            }
+
+            &:active {
+                background-color: var(--button-accent-active-bg-color);
+            }
+        }
 
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--button-accent-hover-bg-color);
+        & .loader {
+            color: var(--button-spinner-static-color);
         }
     }
 
-    &:active {
-        background-color: var(--button-accent-active-bg-color);
-    }
+    &.primary {
+        border: var(--button-border-width) solid transparent;
 
-    & > .loader {
-        color: var(--button-spinner-static-color);
+        @mixin not-disabled {
+            .hint {
+                color: var(--button-primary-hint-color);
+            }
+        }
     }
-}
-
-.primary {
-    border: 1px solid transparent;
-}
 
-.secondary {
-    color: var(--button-secondary-color);
-    border: 1px solid var(--button-secondary-base-border-color);
+    &.secondary {
+        color: var(--button-secondary-color);
+        border: var(--button-border-width) solid var(--button-secondary-base-border-color);
 
-    & > .loader {
-        color: var(--button-spinner-default-color);
-    }
+        & .loader {
+            color: var(--button-spinner-default-color);
+        }
 
-    &:not([disabled]) .hint {
-        color: var(--button-secondary-hint-color);
+        @mixin not-disabled {
+            .hint {
+                color: var(--button-secondary-hint-color);
+            }
+        }
     }
-}
 
-.outlined {
-    color: var(--button-outlined-color);
-    background-color: var(--button-outlined-base-bg-color);
-    border: 1px solid var(--button-outlined-base-border-color);
-
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--button-outlined-hover-bg-color);
-            border-color: var(--button-outlined-hover-border-color);
+    &.outlined {
+        color: var(--button-outlined-color);
+        background-color: var(--button-outlined-base-bg-color);
+        border: var(--button-border-width) solid var(--button-outlined-base-border-color);
+
+        @mixin not-disabled {
+            @mixin hover {
+                background-color: var(--button-outlined-hover-bg-color);
+                border-color: var(--button-outlined-hover-border-color);
+            }
+
+            .hint {
+                color: var(--button-outlined-hint-color);
+            }
+
+            &:active {
+                background-color: var(--button-outlined-active-bg-color);
+            }
         }
-    }
 
-    &:active {
-        background-color: var(--button-outlined-active-bg-color);
+        & .loader {
+            color: var(--button-spinner-default-color);
+        }
     }
 
-    & > .loader {
-        color: var(--button-spinner-default-color);
-    }
+    &.transparent {
+        color: var(--button-transparent-base-color);
+        background-color: transparent;
+        border: var(--button-border-width) solid transparent;
 
-    &:not([disabled]) .hint {
-        color: var(--button-outlined-hint-color);
-    }
-}
+        @mixin not-disabled {
+            @mixin hover {
+                background-color: var(--button-transparent-hover-bg-color);
+            }
 
-.transparent {
-    color: var(--button-transparent-base-color);
-    background-color: transparent;
-    border: 1px solid transparent;
+            .hint {
+                color: var(--button-transparent-base-hint-color);
+            }
 
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--button-transparent-hover-bg-color);
+            &:active {
+                background-color: var(--button-transparent-active-bg-color);
+            }
         }
-    }
 
-    &:active {
-        background-color: var(--button-transparent-active-bg-color);
-    }
-
-    & > .loader {
-        color: var(--button-spinner-default-color);
+        & .loader {
+            color: var(--button-spinner-default-color);
+        }
     }
 
-    &:not([disabled]) .hint {
-        color: var(--button-transparent-base-hint-color);
-    }
-}
+    &.text {
+        background-color: transparent;
+        color: var(--button-text-base-color);
 
-.text {
-    background-color: transparent;
-    color: var(--button-text-base-color);
+        @mixin not-disabled {
+            @mixin hover {
+                color: var(--button-text-hover-color);
+            }
 
-    @media (hover: hover) {
-        &:hover {
-            color: var(--button-text-hover-color);
+            .hint {
+                color: var(--button-text-base-hint-color);
+            }
         }
-    }
-
-    & > .loader {
-        color: var(--button-spinner-default-color);
-    }
 
-    &:not([disabled]) .hint {
-        color: var(--button-text-base-hint-color);
+        & .loader {
+            color: var(--button-spinner-default-color);
+        }
     }
-}
 
-/* Disabled */
+    @mixin disabled {
+        &.accent {
+            color: var(--button-accent-disabled-color);
+            background-color: var(--button-accent-disabled-bg-color);
 
-.component[disabled] {
-    &.accent {
-        color: var(--button-accent-disabled-color);
-        background-color: var(--button-accent-disabled-bg-color);
-
-        &.loading {
-            color: var(--button-accent-color);
-            background-color: var(--button-accent-base-bg-color);
+            &.loading {
+                color: var(--button-accent-color);
+                background-color: var(--button-accent-base-bg-color);
+            }
         }
-    }
 
-    &.secondary {
-        border-color: var(--button-secondary-disabled-border-color);
+        &.secondary {
+            border-color: var(--button-secondary-disabled-border-color);
 
-        &.loading {
-            color: var(--button-secondary-color);
-            background-color: var(--button-secondary-base-bg-color);
-            border-color: var(--button-secondary-base-border-color);
+            &.loading {
+                color: var(--button-secondary-color);
+                background-color: var(--button-secondary-base-bg-color);
+                border-color: var(--button-secondary-base-border-color);
+            }
         }
-    }
 
-    &.outlined {
-        background-color: var(--button-outlined-disabled-bg-color);
+        &.outlined {
+            background-color: var(--button-outlined-disabled-bg-color);
 
-        &.loading {
-            color: var(--button-outlined-color);
-            border-color: var(--button-outlined-base-border-color);
+            &.loading {
+                color: var(--button-outlined-color);
+                border-color: var(--button-outlined-base-border-color);
+            }
         }
-    }
 
-    &.transparent {
-        background-color: transparent;
+        &.transparent {
+            background-color: transparent;
 
-        &.loading {
-            color: var(--button-transparent-base-color);
+            &.loading {
+                color: var(--button-transparent-base-color);
+            }
         }
-    }
 
-    &.text {
-        &.loading {
-            color: var(--button-text-base-color);
+        &.text {
+            &.loading {
+                color: var(--button-text-base-color);
+            }
         }
     }
 }
diff --git a/packages/button/src/components/base-button/index.module.css b/packages/button/src/components/base-button/index.module.css
index e978ccbecd..0d70e1c0fb 100644
--- a/packages/button/src/components/base-button/index.module.css
+++ b/packages/button/src/components/base-button/index.module.css
@@ -1,304 +1,115 @@
 @import '@alfalab/core-components-vars/src/no-typography-index.css';
 @import '../../vars.css';
 
-.component {
-    @mixin reset-tap-highlight-color;
-
-    position: relative;
-    display: inline-flex;
-    vertical-align: middle;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-content: center;
-    align-items: center;
-    margin: var(--gap-0);
-    padding: var(--gap-0) 23px;
-    text-decoration: none;
-    outline: none;
-    box-shadow: none;
-    user-select: none;
-    cursor: pointer;
-    transition:
-        background 0.2s ease,
-        border 0.2s ease,
-        color 0.2s ease;
-    box-sizing: border-box;
-}
-
-.hug {
-    justify-content: center;
-    text-align: center;
-}
-
-.fill {
-    text-align: left;
-}
-
-.hint {
-    @mixin paragraph_primary_small;
-
-    display: block;
-}
-
-.allowBackdropBlur {
-    &.secondary,
-    &.accent[disabled],
-    &.primary[disabled] {
-        backdrop-filter: blur(80px);
+@define-mixin button-size-mixin $height, $width, $gap, $padding-inline {
+    &.minWidth {
+        min-width: $height;
     }
-}
 
-.focused {
-    @mixin focus-outline;
-}
-
-.loading .label,
-.loading .addons {
-    opacity: 0;
-}
-
-.stretchText {
-    flex-grow: 1;
-}
-
-.loader {
-    position: absolute;
-    left: var(--gap-0);
-    right: var(--gap-0);
-    margin: var(--gap-0) auto;
-}
-
-/* Size */
-
-/* За счет того, что у кнопок есть border 1px,
-для полного соответствия макетам padding необходимо уменьшить на 1px (16px -> 15px) */
-.size-32 {
-    min-width: 80px;
-    min-height: var(--size-xxs-height);
-    padding: var(--gap-0) 15px;
-
-    @mixin action_primary_small;
-
-    &.iconOnly {
-        min-width: var(--size-xxs-height);
+    &.minHeight {
+        min-height: $height;
     }
-}
 
-.size-40 {
-    min-width: 88px;
-    min-height: var(--size-xs-height);
-    padding: var(--gap-0) 19px;
-
-    @mixin action_primary_small;
-
-    &.iconOnly {
-        min-width: var(--size-xs-height);
+    &.defaultWidth {
+        min-width: $width;
     }
-}
-
-.size-48 {
-    min-width: 104px;
-    min-height: var(--size-s-height);
 
-    @mixin action_component_primary;
-
-    line-height: 20px;
-
-    &.iconOnly {
-        min-width: var(--size-s-height);
+    &.defaultPaddings {
+        padding: var(--gap-0) calc($padding-inline - var(--button-border-width));
     }
-}
 
-.size-56 {
-    min-width: 128px;
-    min-height: var(--size-m-height);
-    padding: var(--gap-0) 27px;
-
-    @mixin action_component_primary;
-
-    &.iconOnly {
-        min-width: var(--size-m-height);
+    .addon:first-child {
+        margin-right: $gap;
     }
-}
-
-.size-64 {
-    min-width: 160px;
-    min-height: var(--size-l-height);
-    padding: var(--gap-0) 31px;
 
-    @mixin action_primary_large;
-
-    &.iconOnly {
-        min-width: var(--size-l-height);
+    .addon:last-child {
+        margin-left: $gap;
     }
 }
 
-.size-72 {
-    min-width: 168px;
-    min-height: var(--size-xl-height);
-    padding: var(--gap-0) 35px;
-
-    @mixin action_primary_large;
-
-    &.iconOnly {
-        min-width: var(--size-xl-height);
-    }
-}
-
-.withRightAddons {
-    &.size-32 {
-        padding-right: 11px;
-    }
+.component {
+    position: relative;
+    transition:
+        background 0.2s ease,
+        border 0.2s ease,
+        color 0.2s ease;
 
-    &.size-40 {
-        padding-right: 15px;
+    &.rounded {
+        border-radius: var(--border-radius-pill);
     }
 
-    &.size-48 {
-        padding-right: 19px;
-    }
+    /* Text resing */
 
-    &.size-56 {
-        padding-right: 23px;
+    &.hug {
+        justify-content: center;
+        text-align: center;
     }
 
-    &.size-64 {
-        padding-right: 27px;
+    &.fill {
+        text-align: left;
     }
 
-    &.size-72 {
-        padding-right: 31px;
-    }
+    /* View */
 
     &.text {
-        padding-right: var(--gap-0);
+        min-height: 24px;
     }
-}
 
-.withLeftAddons {
-    &.size-32 {
-        padding-left: 11px;
-    }
+    /* Size */
 
-    &.size-40 {
-        padding-left: 15px;
+    &.size32 {
+        @mixin action_primary_small;
+        @mixin button-size-mixin var(--size-xxs-height), 80px, var(--gap-6), var(--gap-16);
     }
 
-    &.size-48 {
-        padding-left: 19px;
+    &.size40 {
+        @mixin action_primary_small;
+        @mixin button-size-mixin var(--size-xs-height), 88px, var(--gap-6), var(--gap-20);
     }
 
-    &.size-56 {
-        padding-left: 23px;
+    &.size48 {
+        @mixin action_component_primary;
+        @mixin button-size-mixin var(--size-s-height), 104px, var(--gap-8), var(--gap-24);
     }
 
-    &.size-64 {
-        padding-left: 27px;
+    &.size56 {
+        @mixin action_component_primary;
+        @mixin button-size-mixin var(--size-m-height), 128px, var(--gap-8), 28px;
     }
 
-    &.size-72 {
-        padding-left: 31px;
+    &.size64 {
+        @mixin action_primary_large;
+        @mixin button-size-mixin var(--size-l-height), 160px, var(--gap-12), var(--gap-32);
     }
 
-    &.text {
-        padding-left: var(--gap-0);
+    &.size72 {
+        @mixin action_primary_large;
+        @mixin button-size-mixin var(--size-xl-height), 168px, var(--gap-12), 36px;
     }
 }
 
-.transparent {
-    min-width: 0;
-}
-
-.text.text {
-    min-width: 0;
-    min-height: 0;
-    padding: var(--gap-0);
-    border: none;
-    appearance: none;
-
-    &.iconOnly {
-        min-width: 0;
-    }
-
-    &.size-48,
-    &.size-56 {
-        min-height: 24px;
-    }
-}
-
-/* Disabled */
-
-.component[disabled] {
-    cursor: var(--disabled-cursor);
-
-    & * {
-        pointer-events: none;
-    }
+.blurred {
+    backdrop-filter: blur(80px);
 }
 
 /* Addons */
 
-.addons {
+.addon {
     display: flex;
     flex-shrink: 0;
     align-items: center;
-    margin: var(--gap-0);
-
-    &:first-child {
-        margin-right: var(--gap-6);
-    }
-
-    &:last-child {
-        margin-left: var(--gap-6);
-    }
-
-    &:only-child {
-        margin: var(--gap-0);
-    }
-}
-
-.size-48,
-.size-56 {
-    & .addons:first-child {
-        margin-right: var(--gap-8);
-    }
-
-    & .addons:last-child {
-        margin-left: var(--gap-8);
-    }
-
-    & .addons:only-child {
-        margin: var(--gap-0);
-    }
-}
-
-.size-64,
-.size-72 {
-    & .addons:first-child {
-        margin-right: var(--gap-12);
-    }
 
-    & .addons:last-child {
-        margin-left: var(--gap-12);
-    }
-
-    & .addons:only-child {
-        margin: var(--gap-0);
+    .defaultPaddings & {
+        &:first-child {
+            margin-left: var(--gap-4-neg);
+        }
+        &:last-child {
+            margin-right: var(--gap-4-neg);
+        }
     }
 }
 
-.iconOnly {
-    padding: var(--gap-0);
-}
-
-/* Block */
-
-.block {
-    display: flex;
-    width: 100%;
-}
-
-/* Nowrap */
+/* Label */
 
 .nowrap {
     overflow: hidden;
@@ -306,6 +117,13 @@
     text-overflow: ellipsis;
 }
 
-.rounded {
-    border-radius: var(--border-radius-pill);
+.stretchText {
+    flex-grow: 1;
+}
+
+/* Hint */
+
+.hint {
+    display: block;
+    @mixin paragraph_primary_small;
 }
diff --git a/packages/button/src/components/base-button/inverted.module.css b/packages/button/src/components/base-button/inverted.module.css
index bcac78abd1..ed2a209ffa 100644
--- a/packages/button/src/components/base-button/inverted.module.css
+++ b/packages/button/src/components/base-button/inverted.module.css
@@ -1,150 +1,160 @@
 @import '../../vars.css';
 
-.accent {
-    color: var(--button-inverted-accent-color);
-    background-color: var(--button-inverted-accent-base-bg-color);
-    border: 1px solid transparent;
+.component {
+    &.accent {
+        color: var(--button-inverted-accent-color);
+        background-color: var(--button-inverted-accent-base-bg-color);
+        border: var(--button-border-width) solid transparent;
+
+        @mixin not-disabled {
+            @mixin hover {
+                background-color: var(--button-inverted-accent-hover-bg-color);
+            }
+
+            &:active {
+                background-color: var(--button-inverted-accent-active-bg-color);
+            }
+        }
 
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--button-inverted-accent-hover-bg-color);
+        & .loader {
+            color: var(--button-spinner-inverted-static-color);
         }
     }
 
-    &:active {
-        background-color: var(--button-inverted-accent-active-bg-color);
-    }
+    &.primary {
+        border: var(--button-border-width) solid transparent;
 
-    & > .loader {
-        color: var(--button-spinner-inverted-static-color);
+        @mixin not-disabled {
+            .hint {
+                color: var(--button-inverted-primary-hint-color);
+            }
+        }
     }
-}
 
-.primary {
-    border: 1px solid transparent;
-}
-
-.secondary {
-    color: var(--button-inverted-secondary-color);
-    border: 1px solid var(--button-inverted-secondary-base-border-color);
+    &.secondary {
+        color: var(--button-inverted-secondary-color);
+        border: var(--button-border-width) solid var(--button-inverted-secondary-base-border-color);
 
-    & > .loader {
-        color: var(--button-spinner-inverted-color);
-    }
+        & .loader {
+            color: var(--button-spinner-inverted-color);
+        }
 
-    &:not([disabled]) .hint {
-        color: var(--button-inverted-secondary-hint-color);
+        @mixin not-disabled {
+            .hint {
+                color: var(--button-inverted-secondary-hint-color);
+            }
+        }
     }
-}
-
-.outlined {
-    color: var(--button-inverted-outlined-color);
-    background-color: var(--button-inverted-outlined-base-bg-color);
-    border: 1px solid var(--button-inverted-outlined-base-border-color);
 
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--button-inverted-outlined-hover-bg-color);
-            border-color: var(--button-inverted-outlined-hover-border-color);
+    &.outlined {
+        color: var(--button-inverted-outlined-color);
+        background-color: var(--button-inverted-outlined-base-bg-color);
+        border: var(--button-border-width) solid var(--button-inverted-outlined-base-border-color);
+
+        @mixin not-disabled {
+            @mixin hover {
+                background-color: var(--button-inverted-outlined-hover-bg-color);
+                border-color: var(--button-inverted-outlined-hover-border-color);
+            }
+
+            &:active {
+                background-color: var(--button-inverted-outlined-active-bg-color);
+            }
+
+            .hint {
+                color: var(--button-inverted-outlined-hint-color);
+            }
         }
-    }
 
-    &:active {
-        background-color: var(--button-inverted-outlined-active-bg-color);
+        & .loader {
+            color: var(--button-spinner-inverted-color);
+        }
     }
 
-    & > .loader {
-        color: var(--button-spinner-inverted-color);
-    }
+    &.transparent {
+        color: var(--button-inverted-transparent-base-color);
+        background-color: transparent;
+        border: var(--button-border-width) solid transparent;
 
-    &:not([disabled]) .hint {
-        color: var(--button-inverted-outlined-hint-color);
-    }
-}
+        @mixin not-disabled {
+            @mixin hover {
+                background-color: var(--button-inverted-transparent-hover-bg-color);
+            }
 
-.transparent {
-    color: var(--button-inverted-transparent-base-color);
-    background-color: transparent;
-    border: 1px solid transparent;
+            &:active {
+                background-color: var(--button-inverted-transparent-active-bg-color);
+            }
 
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--button-inverted-transparent-hover-bg-color);
+            .hint {
+                color: var(--button-inverted-transparent-base-hint-color);
+            }
         }
-    }
 
-    &:active {
-        background-color: var(--button-inverted-transparent-active-bg-color);
-    }
-
-    & > .loader {
-        color: var(--button-spinner-inverted-color);
-    }
-
-    &:not([disabled]) .hint {
-        color: var(--button-inverted-transparent-base-hint-color);
+        & .loader {
+            color: var(--button-spinner-inverted-color);
+        }
     }
-}
 
-.text {
-    background-color: transparent;
-    color: var(--button-inverted-text-base-color);
+    &.text {
+        background-color: transparent;
+        color: var(--button-inverted-text-base-color);
 
-    @media (hover: hover) {
-        &:hover {
-            color: var(--button-inverted-text-hover-color);
+        & .loader {
+            color: var(--button-spinner-inverted-color);
         }
-    }
 
-    & > .loader {
-        color: var(--button-spinner-inverted-color);
-    }
+        @mixin not-disabled {
+            &:hover {
+                color: var(--button-inverted-text-hover-color);
+            }
 
-    &:not([disabled]) .hint {
-        color: var(--button-inverted-text-base-hint-color);
+            .hint {
+                color: var(--button-inverted-text-base-hint-color);
+            }
+        }
     }
-}
 
-.component[disabled] {
-    &.accent {
-        color: var(--button-inverted-accent-disabled-color);
-        background-color: var(--button-inverted-accent-disabled-bg-color);
+    @mixin disabled {
+        &.accent {
+            color: var(--button-inverted-accent-disabled-color);
+            background-color: var(--button-inverted-accent-disabled-bg-color);
 
-        &.loading {
-            color: var(--button-inverted-accent-color);
-            background-color: var(--button-inverted-accent-base-bg-color);
+            &.loading {
+                color: var(--button-inverted-accent-color);
+                background-color: var(--button-inverted-accent-base-bg-color);
+            }
         }
-    }
 
-    &.secondary {
-        border-color: var(--button-inverted-secondary-disabled-border-color);
+        &.secondary {
+            border-color: var(--button-inverted-secondary-disabled-border-color);
 
-        &.loading {
-            color: var(--button-inverted-secondary-color);
-            background-color: var(--button-inverted-secondary-base-bg-color);
-            border-color: var(--button-inverted-secondary-base-border-color);
+            &.loading {
+                color: var(--button-inverted-secondary-color);
+                background-color: var(--button-inverted-secondary-base-bg-color);
+                border-color: var(--button-inverted-secondary-base-border-color);
+            }
         }
-    }
 
-    &.outlined {
-        background-color: var(--button-inverted-outlined-disabled-bg-color);
+        &.outlined {
+            background-color: var(--button-inverted-outlined-disabled-bg-color);
 
-        &.loading {
-            color: var(--button-inverted-outlined-color);
+            &.loading {
+                color: var(--button-inverted-outlined-color);
+            }
         }
-    }
 
-    &.transparent {
-        background-color: transparent;
+        &.transparent {
+            background-color: transparent;
 
-        &.loading {
-            color: var(--button-inverted-transparent-base-color);
+            &.loading {
+                color: var(--button-inverted-transparent-base-color);
+            }
         }
-    }
 
-    &.text {
-        &.loading {
-            color: var(--button-inverted-text-base-color);
+        &.text {
+            &.loading {
+                color: var(--button-inverted-text-base-color);
+            }
         }
     }
 }
diff --git a/packages/button/src/components/button-component/Component.tsx b/packages/button/src/components/button-component/Component.tsx
new file mode 100644
index 0000000000..f87cee8ef0
--- /dev/null
+++ b/packages/button/src/components/button-component/Component.tsx
@@ -0,0 +1,50 @@
+import React, { type AnchorHTMLAttributes, forwardRef } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+
+import { hasOwnProperty } from '@alfalab/core-components-shared';
+
+import { type ButtonComponentProps } from '../base-button-candidate';
+
+import styles from './index.module.css';
+
+function isAnchorProps(props: ButtonComponentProps): props is AnchorHTMLAttributes<HTMLElement> {
+    return hasOwnProperty(props, 'href') && typeof props.href === 'string';
+}
+
+export const ButtonComponent = forwardRef<HTMLElement, ButtonComponentProps>((props, ref) => {
+    const cls = cn(props.className, styles.component);
+    const componentRef = mergeRefs([ref]);
+
+    if (isAnchorProps(props)) {
+        const { href, disabled, rel, ...restProps } = props;
+
+        return (
+            <a
+                {...restProps}
+                className={cls}
+                ref={componentRef}
+                rel={rel ?? (restProps.target === '_blank' ? 'noreferrer noopener' : undefined)}
+                href={disabled ? undefined : href}
+                aria-disabled={disabled}
+            >
+                {props.children}
+            </a>
+        );
+    }
+
+    const { type = 'button', disabled, ...restProps } = props;
+
+    return (
+        <button
+            {...restProps}
+            ref={componentRef}
+            className={cls}
+            // eslint-disable-next-line react/button-has-type
+            type={type}
+            disabled={disabled}
+        >
+            {props.children}
+        </button>
+    );
+});
diff --git a/packages/button/src/components/button-component/index.module.css b/packages/button/src/components/button-component/index.module.css
new file mode 100644
index 0000000000..10c21dd579
--- /dev/null
+++ b/packages/button/src/components/button-component/index.module.css
@@ -0,0 +1,16 @@
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
+@import '../../vars.css';
+
+.component {
+    margin: unset;
+    padding: unset;
+    text-decoration: none;
+    outline: none;
+    box-shadow: none;
+    user-select: none;
+    appearance: none;
+    background: none;
+    border: none;
+    cursor: pointer;
+    box-sizing: border-box; /* same as button's default */
+}
diff --git a/packages/button/src/components/button-component/index.ts b/packages/button/src/components/button-component/index.ts
new file mode 100644
index 0000000000..cb7a81fb3c
--- /dev/null
+++ b/packages/button/src/components/button-component/index.ts
@@ -0,0 +1 @@
+export { ButtonComponent } from './Component';
diff --git a/packages/button/src/desktop/Component.desktop.tsx b/packages/button/src/desktop/Component.desktop.tsx
index ceba7cc4df..27a3751e8a 100644
--- a/packages/button/src/desktop/Component.desktop.tsx
+++ b/packages/button/src/desktop/Component.desktop.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 
 import { BaseButton } from '../components/base-button';
-import { type CommonButtonProps } from '../typings';
+import { type ButtonRef, type CommonButtonProps } from '../typings';
 
 import defaultColors from './default.desktop.module.css';
 import styles from './desktop.module.css';
@@ -12,8 +12,6 @@ const colorStyles = {
     inverted: invertedColors,
 };
 
-export const ButtonDesktop = forwardRef<HTMLAnchorElement | HTMLButtonElement, CommonButtonProps>(
-    (restProps, ref) => (
-        <BaseButton {...restProps} ref={ref} styles={styles} colorStylesMap={colorStyles} />
-    ),
-);
+export const ButtonDesktop = forwardRef<ButtonRef, CommonButtonProps>((restProps, ref) => (
+    <BaseButton {...restProps} ref={ref} styles={styles} colorStylesMap={colorStyles} />
+));
diff --git a/packages/button/src/desktop/default.desktop.module.css b/packages/button/src/desktop/default.desktop.module.css
index 1634b5a452..98c1819992 100644
--- a/packages/button/src/desktop/default.desktop.module.css
+++ b/packages/button/src/desktop/default.desktop.module.css
@@ -1,78 +1,86 @@
 @import '../vars.css';
 
-.accent {
-    &:not([disabled]) .hint {
-        color: var(--button-accent-hint-color);
+.component {
+    &.accent {
+        @mixin not-disabled {
+            .hint {
+                color: var(--button-accent-hint-color);
+            }
+        }
     }
-}
 
-.primary {
-    color: var(--button-primary-color);
-    background-color: var(--button-primary-base-bg-color);
+    &.primary {
+        color: var(--button-primary-color);
+        background-color: var(--button-primary-base-bg-color);
 
-    &:not([disabled]) .hint {
-        color: var(--button-primary-hint-color);
-    }
+        @mixin not-disabled {
+            @mixin hover {
+                background-color: var(--button-primary-hover-bg-color);
+            }
 
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--button-primary-hover-bg-color);
-        }
-    }
+            &:active {
+                background-color: var(--button-primary-active-bg-color);
+            }
 
-    &:active {
-        background-color: var(--button-primary-active-bg-color);
-    }
+            .hint {
+                color: ar(--button-primary-hint-color);
+            }
+        }
 
-    & > .loader {
-        color: var(--button-spinner-primary-color);
+        & .loader {
+            color: var(--button-spinner-primary-color);
+        }
     }
-}
 
-.secondary {
-    background-color: var(--button-secondary-base-bg-color);
+    &.secondary {
+        background-color: var(--button-secondary-base-bg-color);
 
-    &:hover {
-        background-color: var(--button-secondary-hover-bg-color);
-    }
+        @mixin not-disabled {
+            @mixin hover {
+                background-color: var(--button-secondary-hover-bg-color);
+            }
 
-    &:active {
-        background-color: var(--button-secondary-active-bg-color);
+            &:active {
+                background-color: var(--button-secondary-active-bg-color);
+            }
+        }
     }
-}
 
-.text {
-    &:active {
-        color: var(--button-text-active-color);
+    &.text {
+        @mixin not-disabled {
+            &:active {
+                color: var(--button-text-active-color);
+            }
+        }
     }
-}
 
-.component[disabled] {
-    &.primary {
-        color: var(--button-primary-disabled-color);
-        background-color: var(--button-primary-disabled-bg-color);
+    @mixin disabled {
+        &.primary {
+            color: var(--button-primary-disabled-color);
+            background-color: var(--button-primary-disabled-bg-color);
 
-        &.loading {
-            color: var(--button-primary-color);
-            background-color: var(--button-primary-base-bg-color);
+            &.loading {
+                color: var(--button-primary-color);
+                background-color: var(--button-primary-base-bg-color);
+            }
         }
-    }
 
-    &.secondary {
-        color: var(--button-secondary-disabled-color);
-        background-color: var(--button-secondary-disabled-bg-color);
-    }
+        &.secondary {
+            color: var(--button-secondary-disabled-color);
+            background-color: var(--button-secondary-disabled-bg-color);
+        }
 
-    &.outlined {
-        color: var(--button-outlined-disabled-color);
-        border-color: var(--button-outlined-disabled-border-color);
-    }
+        &.outlined {
+            color: var(--button-outlined-disabled-color);
+            border-color: var(--button-outlined-disabled-border-color);
+        }
 
-    &.transparent {
-        color: var(--button-transparent-disabled-color);
-    }
+        &.transparent {
+            color: var(--button-transparent-disabled-color);
+        }
 
-    &.text {
-        color: var(--button-text-disabled-color);
+        &.text {
+            color: var(--button-text-disabled-color);
+        }
     }
 }
diff --git a/packages/button/src/desktop/desktop.module.css b/packages/button/src/desktop/desktop.module.css
index 058252f7e2..4b2b8b23e3 100644
--- a/packages/button/src/desktop/desktop.module.css
+++ b/packages/button/src/desktop/desktop.module.css
@@ -1,25 +1,27 @@
 @import '../vars.css';
 
-.size-32 {
-    border-radius: var(--button-xxs-size-border-radius);
-}
+.component {
+    &.size32 {
+        border-radius: var(--button-xxs-size-border-radius);
+    }
 
-.size-40 {
-    border-radius: var(--button-xs-size-border-radius);
-}
+    &.size40 {
+        border-radius: var(--button-xs-size-border-radius);
+    }
 
-.size-48 {
-    border-radius: var(--button-s-size-border-radius);
-}
+    &.size48 {
+        border-radius: var(--button-s-size-border-radius);
+    }
 
-.size-56 {
-    border-radius: var(--button-m-size-border-radius);
-}
+    &.size56 {
+        border-radius: var(--button-m-size-border-radius);
+    }
 
-.size-64 {
-    border-radius: var(--button-l-size-border-radius);
-}
+    &.size64 {
+        border-radius: var(--button-l-size-border-radius);
+    }
 
-.size-72 {
-    border-radius: var(--button-xl-size-border-radius);
+    &.size72 {
+        border-radius: var(--button-xl-size-border-radius);
+    }
 }
diff --git a/packages/button/src/desktop/inverted.desktop.module.css b/packages/button/src/desktop/inverted.desktop.module.css
index e1aa64135e..90a6a6794d 100644
--- a/packages/button/src/desktop/inverted.desktop.module.css
+++ b/packages/button/src/desktop/inverted.desktop.module.css
@@ -1,78 +1,85 @@
 @import '../vars.css';
 
-.accent {
-    &:not([disabled]) .hint {
-        color: var(--button-inverted-accent-hint-color);
+.component {
+    &.accent {
+        @mixin not-disabled {
+            .hint {
+                color: var(--button-inverted-accent-hint-color);
+            }
+        }
     }
-}
 
-.primary {
-    color: var(--button-inverted-primary-color);
-    background-color: var(--button-inverted-primary-base-bg-color);
-
-    &:not([disabled]) .hint {
-        color: var(--button-inverted-primary-hint-color);
-    }
+    &.primary {
+        color: var(--button-inverted-primary-color);
+        background-color: var(--button-inverted-primary-base-bg-color);
 
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--button-inverted-primary-hover-bg-color);
-        }
-    }
+        @mixin not-disabled {
+            @mixin hover {
+                background-color: var(--button-inverted-primary-hover-bg-color);
+            }
 
-    &:active {
-        background-color: var(--button-inverted-primary-active-bg-color);
-    }
+            &:active {
+                background-color: var(--button-inverted-primary-active-bg-color);
+            }
 
-    & > .loader {
-        color: var(--button-spinner-inverted-primary-color);
+            .hint {
+                color: var(--button-inverted-primary-hint-color);
+            }
+        }
+        & .loader {
+            color: var(--button-spinner-inverted-primary-color);
+        }
     }
-}
 
-.secondary {
-    background-color: var(--button-inverted-secondary-base-bg-color);
+    &.secondary {
+        background-color: var(--button-inverted-secondary-base-bg-color);
 
-    &:hover {
-        background-color: var(--button-inverted-secondary-hover-bg-color);
-    }
+        @mixin not-disabled {
+            @mixin hover {
+                background-color: var(--button-inverted-secondary-hover-bg-color);
+            }
 
-    &:active {
-        background-color: var(--button-inverted-secondary-active-bg-color);
+            &:active {
+                background-color: var(--button-inverted-secondary-active-bg-color);
+            }
+        }
     }
-}
 
-.text {
-    &:active {
-        color: var(--button-inverted-text-active-color);
+    &.text {
+        @mixin not-disabled {
+            &:active {
+                color: var(--button-inverted-text-active-color);
+            }
+        }
     }
-}
 
-.component[disabled] {
-    &.primary {
-        color: var(--button-inverted-primary-disabled-color);
-        background-color: var(--button-inverted-primary-disabled-bg-color);
+    @mixin disabled {
+        &.primary {
+            color: var(--button-inverted-primary-disabled-color);
+            background-color: var(--button-inverted-primary-disabled-bg-color);
 
-        &.loading {
-            color: var(--button-inverted-primary-color);
-            background-color: var(--button-inverted-primary-base-bg-color);
+            &.loading {
+                color: var(--button-inverted-primary-color);
+                background-color: var(--button-inverted-primary-base-bg-color);
+            }
         }
-    }
 
-    &.secondary {
-        color: var(--button-inverted-secondary-disabled-color);
-        background-color: var(--button-inverted-secondary-disabled-bg-color);
-    }
+        &.secondary {
+            color: var(--button-inverted-secondary-disabled-color);
+            background-color: var(--button-inverted-secondary-disabled-bg-color);
+        }
 
-    &.outlined {
-        color: var(--button-inverted-outlined-disabled-color);
-        border-color: var(--button-inverted-outlined-disabled-border-color);
-    }
+        &.outlined {
+            color: var(--button-inverted-outlined-disabled-color);
+            border-color: var(--button-inverted-outlined-disabled-border-color);
+        }
 
-    &.transparent {
-        color: var(--button-inverted-transparent-disabled-color);
-    }
+        &.transparent {
+            color: var(--button-inverted-transparent-disabled-color);
+        }
 
-    &.text {
-        color: var(--button-inverted-text-disabled-color);
+        &.text {
+            color: var(--button-inverted-text-disabled-color);
+        }
     }
 }
diff --git a/packages/button/src/mobile/Component.mobile.tsx b/packages/button/src/mobile/Component.mobile.tsx
index a21fe394e0..35112f78d1 100644
--- a/packages/button/src/mobile/Component.mobile.tsx
+++ b/packages/button/src/mobile/Component.mobile.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 
 import { BaseButton } from '../components/base-button';
-import { type CommonButtonProps } from '../typings';
+import { type ButtonRef, type CommonButtonProps } from '../typings';
 
 import defaultColors from './default.mobile.module.css';
 import invertedColors from './inverted.mobile.module.css';
@@ -12,8 +12,6 @@ const colorStyles = {
     inverted: invertedColors,
 };
 
-export const ButtonMobile = forwardRef<HTMLAnchorElement | HTMLButtonElement, CommonButtonProps>(
-    (restProps, ref) => (
-        <BaseButton {...restProps} ref={ref} colorStylesMap={colorStyles} styles={styles} />
-    ),
-);
+export const ButtonMobile = forwardRef<ButtonRef, CommonButtonProps>((restProps, ref) => (
+    <BaseButton {...restProps} ref={ref} colorStylesMap={colorStyles} styles={styles} />
+));
diff --git a/packages/button/src/mobile/default.mobile.module.css b/packages/button/src/mobile/default.mobile.module.css
index a87a6b6180..615e91f447 100644
--- a/packages/button/src/mobile/default.mobile.module.css
+++ b/packages/button/src/mobile/default.mobile.module.css
@@ -1,74 +1,84 @@
 @import '../vars.css';
 
-.accent {
-    &:not([disabled]) .hint {
-        color: var(--button-mobile-accent-hint-color);
+.component {
+    &.accent {
+        @mixin not-disabled {
+            .hint {
+                color: var(--button-mobile-accent-hint-color);
+            }
+        }
     }
-}
 
-.primary {
-    color: var(--button-primary-mobile-color);
-    background-color: var(--button-primary-mobile-base-bg-color);
+    &.primary {
+        color: var(--button-primary-mobile-color);
+        background-color: var(--button-primary-mobile-base-bg-color);
 
-    &:not([disabled]) .hint {
-        color: var(--button-mobile-primary-hint-color);
-    }
+        @mixin not-disabled {
+            @mixin hover {
+                background-color: var(--button-primary-mobile-hover-bg-color);
+            }
 
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--button-primary-mobile-hover-bg-color);
+            &:active {
+                background-color: var(--button-primary-mobile-active-bg-color);
+            }
         }
-    }
 
-    &:active {
-        background-color: var(--button-primary-mobile-active-bg-color);
-    }
+        & .loader {
+            color: var(--button-spinner-primary-mobile-color);
+        }
 
-    & > .loader {
-        color: var(--button-spinner-primary-mobile-color);
+        @mixin not-disabled {
+            .hint {
+                color: var(--button-mobile-primary-hint-color);
+            }
+        }
     }
-}
 
-.secondary {
-    background-color: var(--button-secondary-mobile-base-bg-color);
+    &.secondary {
+        background-color: var(--button-secondary-mobile-base-bg-color);
 
-    &:active {
-        background-color: var(--button-secondary-mobile-active-bg-color);
+        @mixin not-disabled {
+            &:active {
+                background-color: var(--button-secondary-mobile-active-bg-color);
+            }
+        }
     }
-}
 
-.text {
-    &:active {
-        color: var(--button-text-mobile-active-color);
+    &.text {
+        @mixin not-disabled {
+            &:active {
+                color: var(--button-text-mobile-active-color);
+            }
+        }
     }
-}
 
-.component[disabled] {
-    &.primary {
-        color: var(--button-primary-mobile-disabled-color);
-        background-color: var(--button-primary-mobile-disabled-bg-color);
+    @mixin disabled {
+        &.primary {
+            color: var(--button-primary-mobile-disabled-color);
+            background-color: var(--button-primary-mobile-disabled-bg-color);
 
-        &.loading {
-            color: var(--button-primary-mobile-color);
-            background-color: var(--button-primary-mobile-base-bg-color);
+            &.loading {
+                color: var(--button-primary-mobile-color);
+                background-color: var(--button-primary-mobile-base-bg-color);
+            }
         }
-    }
 
-    &.secondary {
-        color: var(--button-secondary-mobile-disabled-color);
-        background-color: var(--button-secondary-mobile-disabled-bg-color);
-    }
+        &.secondary {
+            color: var(--button-secondary-mobile-disabled-color);
+            background-color: var(--button-secondary-mobile-disabled-bg-color);
+        }
 
-    &.outlined {
-        color: var(--button-outlined-mobile-disabled-color);
-        border-color: var(--button-outlined-mobile-disabled-border-color);
-    }
+        &.outlined {
+            color: var(--button-outlined-mobile-disabled-color);
+            border-color: var(--button-outlined-mobile-disabled-border-color);
+        }
 
-    &.transparent {
-        color: var(--button-transparent-mobile-disabled-color);
-    }
+        &.transparent {
+            color: var(--button-transparent-mobile-disabled-color);
+        }
 
-    &.text {
-        color: var(--button-text-mobile-disabled-color);
+        &.text {
+            color: var(--button-text-mobile-disabled-color);
+        }
     }
 }
diff --git a/packages/button/src/mobile/inverted.mobile.module.css b/packages/button/src/mobile/inverted.mobile.module.css
index 18da950338..e5ed89e107 100644
--- a/packages/button/src/mobile/inverted.mobile.module.css
+++ b/packages/button/src/mobile/inverted.mobile.module.css
@@ -1,74 +1,84 @@
 @import '../vars.css';
 
-.accent {
-    &:not([disabled]) .hint {
-        color: var(--button-mobile-inverted-accent-hint-color);
+.component {
+    &.accent {
+        @mixin not-disabled {
+            .hint {
+                color: var(--button-mobile-inverted-accent-hint-color);
+            }
+        }
     }
-}
 
-.primary {
-    color: var(--button-inverted-primary-mobile-color);
-    background-color: var(--button-inverted-primary-mobile-base-bg-color);
+    &.primary {
+        color: var(--button-inverted-primary-mobile-color);
+        background-color: var(--button-inverted-primary-mobile-base-bg-color);
 
-    &:not([disabled]) .hint {
-        color: var(--button-mobile-inverted-primary-hint-color);
-    }
+        @mixin not-disabled {
+            @mixin hover {
+                background-color: var(--button-inverted-primary-mobile-hover-bg-color);
+            }
 
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--button-inverted-primary-mobile-hover-bg-color);
+            &:active {
+                background-color: var(--button-inverted-primary-mobile-active-bg-color);
+            }
         }
-    }
 
-    &:active {
-        background-color: var(--button-inverted-primary-mobile-active-bg-color);
-    }
+        & .loader {
+            color: var(--button-spinner-inverted-primary-mobile-color);
+        }
 
-    & > .loader {
-        color: var(--button-spinner-inverted-primary-mobile-color);
+        @mixin not-disabled {
+            .hint {
+                color: var(--button-mobile-inverted-primary-hint-color);
+            }
+        }
     }
-}
 
-.secondary {
-    background-color: var(--button-inverted-secondary-mobile-base-bg-color);
+    &.secondary {
+        background-color: var(--button-inverted-secondary-mobile-base-bg-color);
 
-    &:active {
-        background-color: var(--button-inverted-secondary-mobile-active-bg-color);
+        @mixin not-disabled {
+            &:active {
+                background-color: var(--button-inverted-secondary-mobile-active-bg-color);
+            }
+        }
     }
-}
 
-.text {
-    &:active {
-        color: var(--button-inverted-text-mobile-active-color);
+    &.text {
+        @mixin not-disabled {
+            &:active {
+                color: var(--button-inverted-text-mobile-active-color);
+            }
+        }
     }
-}
 
-.component[disabled] {
-    &.primary {
-        color: var(--button-inverted-primary-mobile-disabled-color);
-        background-color: var(--button-inverted-primary-mobile-disabled-bg-color);
+    @mixin disabled {
+        &.primary {
+            color: var(--button-inverted-primary-mobile-disabled-color);
+            background-color: var(--button-inverted-primary-mobile-disabled-bg-color);
 
-        &.loading {
-            color: var(--button-inverted-primary-mobile-color);
-            background-color: var(--button-inverted-primary-mobile-base-bg-color);
+            &.loading {
+                color: var(--button-inverted-primary-mobile-color);
+                background-color: var(--button-inverted-primary-mobile-base-bg-color);
+            }
         }
-    }
 
-    &.secondary {
-        color: var(--button-inverted-secondary-mobile-disabled-color);
-        background-color: var(--button-inverted-secondary-mobile-disabled-bg-color);
-    }
+        &.secondary {
+            color: var(--button-inverted-secondary-mobile-disabled-color);
+            background-color: var(--button-inverted-secondary-mobile-disabled-bg-color);
+        }
 
-    &.outlined {
-        color: var(--button-inverted-outlined-mobile-disabled-color);
-        border-color: var(--button-inverted-outlined-mobile-disabled-border-color);
-    }
+        &.outlined {
+            color: var(--button-inverted-outlined-mobile-disabled-color);
+            border-color: var(--button-inverted-outlined-mobile-disabled-border-color);
+        }
 
-    &.transparent {
-        color: var(--button-inverted-transparent-mobile-disabled-color);
-    }
+        &.transparent {
+            color: var(--button-inverted-transparent-mobile-disabled-color);
+        }
 
-    &.text {
-        color: var(--button-inverted-text-mobile-disabled-color);
+        &.text {
+            color: var(--button-inverted-text-mobile-disabled-color);
+        }
     }
 }
diff --git a/packages/button/src/mobile/mobile.module.css b/packages/button/src/mobile/mobile.module.css
index 3d1ca92448..704b1c9429 100644
--- a/packages/button/src/mobile/mobile.module.css
+++ b/packages/button/src/mobile/mobile.module.css
@@ -1,25 +1,27 @@
 @import '../vars.css';
 
-.size-32 {
-    border-radius: var(--button-xxs-size-mobile-border-radius);
-}
+.component {
+    &.size32 {
+        border-radius: var(--button-xxs-size-mobile-border-radius);
+    }
 
-.size-40 {
-    border-radius: var(--button-xs-size-mobile-border-radius);
-}
+    &.size40 {
+        border-radius: var(--button-xs-size-mobile-border-radius);
+    }
 
-.size-48 {
-    border-radius: var(--button-s-size-mobile-border-radius);
-}
+    &.size48 {
+        border-radius: var(--button-s-size-mobile-border-radius);
+    }
 
-.size-56 {
-    border-radius: var(--button-m-size-mobile-border-radius);
-}
+    &.size56 {
+        border-radius: var(--button-m-size-mobile-border-radius);
+    }
 
-.size-64 {
-    border-radius: var(--button-l-size-mobile-border-radius);
-}
+    &.size64 {
+        border-radius: var(--button-l-size-mobile-border-radius);
+    }
 
-.size-72 {
-    border-radius: var(--button-xl-size-mobile-border-radius);
+    &.size72 {
+        border-radius: var(--button-xl-size-mobile-border-radius);
+    }
 }
diff --git a/packages/button/src/shared/hooks.ts b/packages/button/src/shared/hooks.ts
new file mode 100644
index 0000000000..8056641449
--- /dev/null
+++ b/packages/button/src/shared/hooks.ts
@@ -0,0 +1,32 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { isNonNullable } from '@alfalab/core-components-shared';
+
+import { LOADER_MIN_DISPLAY_INTERVAL } from '../constants/loader-min-display-interval';
+
+export function useLoading(loading: boolean | undefined = false) {
+    const [loaderTimePassed, setLoaderTimePassed] = useState(true);
+    const timerId = useRef<number | null>(null);
+
+    useEffect(() => {
+        if (loading) {
+            setLoaderTimePassed(false);
+
+            timerId.current = window.setTimeout(() => {
+                setLoaderTimePassed(true);
+                timerId.current = null;
+            }, LOADER_MIN_DISPLAY_INTERVAL);
+        }
+    }, [loading]);
+
+    useEffect(
+        () => () => {
+            if (isNonNullable(timerId.current)) {
+                window.clearTimeout(timerId.current);
+            }
+        },
+        [],
+    );
+
+    return loading || !loaderTimePassed;
+}
diff --git a/packages/button/src/shared/index.ts b/packages/button/src/shared/index.ts
index 21115f7b85..4af5142953 100644
--- a/packages/button/src/shared/index.ts
+++ b/packages/button/src/shared/index.ts
@@ -1 +1,2 @@
 export { getButtonTestIds } from '../utils';
+export { useLoading } from './hooks';
diff --git a/packages/button/src/typings.ts b/packages/button/src/typings.ts
index bc55f9567a..297c02dc58 100644
--- a/packages/button/src/typings.ts
+++ b/packages/button/src/typings.ts
@@ -1,20 +1,22 @@
+import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type ReactNode } from 'react';
+
 import {
-    type AnchorHTMLAttributes,
-    type ButtonHTMLAttributes,
-    type ElementType,
-    type ReactNode,
-} from 'react';
-
-export type StyleColors = {
-    default: {
-        [key: string]: string;
-    };
-    inverted: {
-        [key: string]: string;
-    };
-};
-
-type ComponentProps = {
+    type ComponentProps as BaseButtonComponentProps,
+    type MaybeAnchorAttributes,
+} from './components/base-button-candidate';
+
+interface StylesMap {
+    [key: string]: string;
+}
+
+export interface StyleColors {
+    default: StylesMap;
+    inverted: StylesMap;
+}
+
+type OmitStrict<T, K extends keyof T> = Omit<T, K>;
+
+export interface ComponentProps extends OmitStrict<BaseButtonComponentProps, 'disabledClassName'> {
     /**
      * Тип кнопки
      * @default secondary
@@ -34,7 +36,7 @@ type ComponentProps = {
     textResizing?: 'fill' | 'hug';
 
     /**
-     *  Подпись под лейблом (видна только в размерах >= m)
+     *  Подпись под лейблом. Видна только при размерах `>=56`
      */
     hint?: ReactNode;
 
@@ -54,44 +56,12 @@ type ComponentProps = {
      */
     size?: 32 | 40 | 48 | 56 | 64 | 72;
 
-    /**
-     * Растягивает компонент на ширину контейнера
-     * @default false
-     */
-    block?: boolean;
-
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-
     /**
      * Дополнительный класс для спиннера
+     * @deprecated Используйте `loaderClassName`
      */
     spinnerClassName?: string;
 
-    /**
-     * Выводит ссылку в виде кнопки
-     */
-    href?: string;
-
-    /**
-     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
-     */
-    Component?: ElementType;
-
-    /**
-     * Идентификатор для систем автоматизированного тестирования.
-     * Для спиннера используется модификатор -loader
-     */
-    dataTestId?: string;
-
-    /**
-     * Показать лоадер
-     * @default false
-     */
-    loading?: boolean;
-
     /**
      * Не переносить текст кнопки на новую строку
      * @default false
@@ -108,29 +78,35 @@ type ComponentProps = {
      * @description Может привести к просадке fps и другим багам. Старайтесь не размещать слишком много заблюреных элементов на одной странице.
      */
     allowBackdropBlur?: boolean;
+}
 
-    /**
-     * Дочерние элементы.
-     */
-    children?: ReactNode;
-};
-
-export type PrivateButtonProps = {
+export interface PrivateButtonProps {
     /**
      * Основные стили компонента.
      */
-    styles: { [key: string]: string };
+    styles: StylesMap;
 
     /**
      * Стили компонента для default и inverted режима.
      */
     colorStylesMap: StyleColors;
-};
+}
 
-export type CommonButtonProps = ComponentProps &
-    Partial<AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>>;
+export type ButtonRef = HTMLElement;
 
-export type ButtonProps = CommonButtonProps & {
+interface AnchorLikeProps
+    extends MaybeAnchorAttributes<string>,
+        ComponentProps,
+        Omit<AnchorHTMLAttributes<HTMLElement>, keyof ComponentProps> {}
+
+interface ButtonLikeProps
+    extends MaybeAnchorAttributes<undefined>,
+        ComponentProps,
+        Omit<ButtonHTMLAttributes<HTMLElement>, keyof ComponentProps> {}
+
+export type CommonButtonProps = AnchorLikeProps | ButtonLikeProps;
+
+export interface ResponsiveProps {
     /**
      * Контрольная точка, с нее начинается desktop версия
      * @default 1024
@@ -147,4 +123,6 @@ export type ButtonProps = CommonButtonProps & {
      * @deprecated Используйте client
      */
     defaultMatchMediaValue?: boolean | (() => boolean);
-};
+}
+
+export type ButtonProps = CommonButtonProps & ResponsiveProps;
diff --git a/packages/button/src/vars.css b/packages/button/src/vars.css
index 8bd67df7b8..9dd38762fa 100644
--- a/packages/button/src/vars.css
+++ b/packages/button/src/vars.css
@@ -1,6 +1,9 @@
 @import '@alfalab/core-components-vars/src/no-typography-index.css';
 
 :root {
+    /* misc */
+    --button-border-width: 1px;
+
     /* border-radius desktop */
     --button-xxs-size-border-radius: var(--border-radius-8);
     --button-xs-size-border-radius: var(--border-radius-10);
diff --git a/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap b/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap
index 1829d219e9..70dfad89dd 100644
--- a/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap
@@ -51,12 +51,12 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
             >
               <button
                 aria-label="Предыдущий период"
-                class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component component border_32"
+                class="component component component component component text text text size48 hug size48 cc-icon-button arrow primary component component border_32 component"
                 data-test-id="period-slider-btn-previous-day"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="iconWrapper size-32 center"
@@ -84,12 +84,12 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
               </span>
               <button
                 aria-label="Следующий период"
-                class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component component border_32"
+                class="component component component component component text text text size48 hug size48 cc-icon-button arrow primary component component border_32 component"
                 data-test-id="period-slider-btn-next-day"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="iconWrapper size-32 center"
@@ -169,11 +169,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="0"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -193,11 +193,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -217,11 +217,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -241,11 +241,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -267,11 +267,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -291,11 +291,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -315,11 +315,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -339,11 +339,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -363,11 +363,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -387,11 +387,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -411,11 +411,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -437,11 +437,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -461,11 +461,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -485,11 +485,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -509,11 +509,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -533,11 +533,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -557,11 +557,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -581,11 +581,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -607,11 +607,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -631,11 +631,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -655,11 +655,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -679,11 +679,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -703,11 +703,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -727,11 +727,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -751,11 +751,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -777,11 +777,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -801,11 +801,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -825,11 +825,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -849,11 +849,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -873,11 +873,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -897,11 +897,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -969,12 +969,12 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
             >
               <button
                 aria-label="Предыдущий период"
-                class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component component border_32"
+                class="component component component component component text text text size48 hug size48 cc-icon-button arrow primary component component border_32 component"
                 data-test-id="period-slider-btn-previous-day"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="iconWrapper size-32 center"
@@ -1002,12 +1002,12 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
               </span>
               <button
                 aria-label="Следующий период"
-                class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component component border_32"
+                class="component component component component component text text text size48 hug size48 cc-icon-button arrow primary component component border_32 component"
                 data-test-id="period-slider-btn-next-day"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="iconWrapper size-32 center"
@@ -1090,11 +1090,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="0"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1116,11 +1116,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1140,11 +1140,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1164,11 +1164,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1188,11 +1188,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1212,11 +1212,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1236,11 +1236,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1260,11 +1260,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1286,11 +1286,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1310,11 +1310,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1334,11 +1334,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1358,11 +1358,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1382,11 +1382,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1406,11 +1406,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1430,11 +1430,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1456,11 +1456,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1480,11 +1480,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1504,11 +1504,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1528,11 +1528,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1552,11 +1552,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1576,11 +1576,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1600,11 +1600,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1626,11 +1626,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1650,11 +1650,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1674,11 +1674,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1698,11 +1698,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1722,11 +1722,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1746,11 +1746,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1770,11 +1770,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
@@ -1796,11 +1796,11 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component text size-40 hug size-40 component text component text day rounded"
+                      class="component component component component component text text text size40 hug size40 day rounded component"
                       type="button"
                     >
                       <span
-                        class="label stretchText"
+                        class="label"
                       >
                         <span
                           class="dayContent"
diff --git a/packages/calendar-with-skeleton/src/__snapshots__/Component.test.tsx.snap b/packages/calendar-with-skeleton/src/__snapshots__/Component.test.tsx.snap
index 675e12edeb..9624bdd01d 100644
--- a/packages/calendar-with-skeleton/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/calendar-with-skeleton/src/__snapshots__/Component.test.tsx.snap
@@ -18,11 +18,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
           class="component monthYear"
         >
           <button
-            class="component text size-40 hug size-40 component text component text button filled button month"
+            class="component component component component component text text text size40 hug size40 button filled button month component"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               <span
                 class="buttonContent"
@@ -47,11 +47,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
             </span>
           </button>
           <button
-            class="component text size-40 hug size-40 component text component text button filled button year"
+            class="component component component component component text text text size40 hug size40 button filled button year component"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               <span
                 class="buttonContent"
@@ -138,11 +138,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -165,11 +165,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -190,11 +190,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -215,11 +215,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -240,11 +240,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -265,11 +265,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -290,11 +290,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -315,11 +315,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -342,11 +342,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -367,11 +367,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -392,11 +392,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -417,11 +417,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -442,11 +442,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -467,11 +467,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -492,11 +492,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -519,11 +519,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -544,11 +544,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -569,11 +569,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -594,11 +594,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -619,11 +619,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -644,11 +644,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -669,11 +669,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -696,11 +696,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -721,11 +721,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -746,11 +746,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -771,11 +771,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -796,11 +796,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -821,11 +821,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -846,11 +846,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded"
+                  class="component component component component component text text text size40 hug size40 day rounded component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
@@ -873,11 +873,11 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="0"
               >
                 <button
-                  class="component text size-40 hug size-40 component text component text day rounded selected"
+                  class="component component component component component text text text size40 hug size40 day rounded selected component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="dayContent"
diff --git a/packages/calendar/src/__snapshots__/Component.test.tsx.snap b/packages/calendar/src/__snapshots__/Component.test.tsx.snap
index 557987d256..0a25776e18 100644
--- a/packages/calendar/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/calendar/src/__snapshots__/Component.test.tsx.snap
@@ -15,11 +15,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
         class="component monthYear"
       >
         <button
-          class="component text size-40 hug size-40 component text component text button filled button month"
+          class="component component component component component text text text size40 hug size40 button filled button month component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             <span
               class="buttonContent"
@@ -44,11 +44,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
           </span>
         </button>
         <button
-          class="component text size-40 hug size-40 component text component text button filled button year"
+          class="component component component component component text text text size40 hug size40 button filled button year component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             <span
               class="buttonContent"
@@ -135,11 +135,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -162,11 +162,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -187,11 +187,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -212,11 +212,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -237,11 +237,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -262,11 +262,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -287,11 +287,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -312,11 +312,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -339,11 +339,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -364,11 +364,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -389,11 +389,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -414,11 +414,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -439,11 +439,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -464,11 +464,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -489,11 +489,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -516,11 +516,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -541,11 +541,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -566,11 +566,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -591,11 +591,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -616,11 +616,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -641,11 +641,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -666,11 +666,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -693,11 +693,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -718,11 +718,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -743,11 +743,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -768,11 +768,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -793,11 +793,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -818,11 +818,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -843,11 +843,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -870,11 +870,11 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="0"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded selected"
+                class="component component component component component text text text size40 hug size40 day rounded selected component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -916,11 +916,11 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
         class="component monthYear"
       >
         <button
-          class="component text size-40 hug size-40 component text component text button filled button month"
+          class="component component component component component text text text size40 hug size40 button filled button month component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             <span
               class="buttonContent"
@@ -945,11 +945,11 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
           </span>
         </button>
         <button
-          class="component text size-40 hug size-40 component text component text button filled button year"
+          class="component component component component component text text text size40 hug size40 button filled button year component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             <span
               class="buttonContent"
@@ -983,156 +983,156 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
       >
         <button
           aria-selected="false"
-          class="component text size-40 hug size-40 component text component text button default button"
+          class="component component component component component text text text size40 hug size40 button default button component"
           data-date="1577836800000"
           tabindex="-1"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             Январь
           </span>
         </button>
         <button
           aria-selected="false"
-          class="component text size-40 hug size-40 component text component text button default button"
+          class="component component component component component text text text size40 hug size40 button default button component"
           data-date="1580515200000"
           tabindex="-1"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             Февраль
           </span>
         </button>
         <button
           aria-selected="false"
-          class="component text size-40 hug size-40 component text component text button default button"
+          class="component component component component component text text text size40 hug size40 button default button component"
           data-date="1583020800000"
           tabindex="-1"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             Март
           </span>
         </button>
         <button
           aria-selected="false"
-          class="component text size-40 hug size-40 component text component text button default button"
+          class="component component component component component text text text size40 hug size40 button default button component"
           data-date="1585699200000"
           tabindex="-1"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             Апрель
           </span>
         </button>
         <button
           aria-selected="false"
-          class="component text size-40 hug size-40 component text component text button default button"
+          class="component component component component component text text text size40 hug size40 button default button component"
           data-date="1588291200000"
           tabindex="-1"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             Май
           </span>
         </button>
         <button
           aria-selected="false"
-          class="component text size-40 hug size-40 component text component text button default button"
+          class="component component component component component text text text size40 hug size40 button default button component"
           data-date="1590969600000"
           tabindex="-1"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             Июнь
           </span>
         </button>
         <button
           aria-selected="false"
-          class="component text size-40 hug size-40 component text component text button default button"
+          class="component component component component component text text text size40 hug size40 button default button component"
           data-date="1593561600000"
           tabindex="-1"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             Июль
           </span>
         </button>
         <button
           aria-selected="false"
-          class="component text size-40 hug size-40 component text component text button default button"
+          class="component component component component component text text text size40 hug size40 button default button component"
           data-date="1596240000000"
           tabindex="-1"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             Август
           </span>
         </button>
         <button
           aria-selected="false"
-          class="component text size-40 hug size-40 component text component text button default button"
+          class="component component component component component text text text size40 hug size40 button default button component"
           data-date="1598918400000"
           tabindex="-1"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             Сентябрь
           </span>
         </button>
         <button
           aria-selected="false"
-          class="component text size-40 hug size-40 component text component text button default button"
+          class="component component component component component text text text size40 hug size40 button default button component"
           data-date="1601510400000"
           tabindex="-1"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             Октябрь
           </span>
         </button>
         <button
           aria-selected="true"
-          class="component text size-40 hug size-40 component text component text button selected button"
+          class="component component component component component text text text size40 hug size40 button selected button component"
           data-date="1604188800000"
           tabindex="0"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             Ноябрь
           </span>
         </button>
         <button
           aria-selected="false"
-          class="component text size-40 hug size-40 component text component text button default button"
+          class="component component component component component text text text size40 hug size40 button default button component"
           data-date="1606780800000"
           tabindex="-1"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             Декабрь
           </span>
@@ -1158,11 +1158,11 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
         class="component monthYear"
       >
         <button
-          class="component text size-40 hug size-40 component text component text button filled button month"
+          class="component component component component component text text text size40 hug size40 button filled button month component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             <span
               class="buttonContent"
@@ -1187,11 +1187,11 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </span>
         </button>
         <button
-          class="component text size-40 hug size-40 component text component text button filled button year"
+          class="component component component component component text text text size40 hug size40 button filled button year component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             <span
               class="buttonContent"
@@ -1228,1235 +1228,1235 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
         >
           <button
             aria-selected="true"
-            class="component text size-40 hug size-40 component text component text button selected button"
+            class="component component component component component text text text size40 hug size40 button selected button component"
             data-date="1577836800000"
             tabindex="0"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2020
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="1546300800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2019
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="1514764800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2018
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="1483228800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2017
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="1451606400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2016
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="1420070400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2015
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="1388534400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2014
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="1356998400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2013
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="1325376000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2012
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="1293840000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2011
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="1262304000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2010
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="1230768000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2009
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="1199145600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2008
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="1167609600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2007
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="1136073600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2006
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="1104537600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2005
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="1072915200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2004
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="1041379200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2003
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="1009843200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2002
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="978307200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2001
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="946684800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               2000
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="915148800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1999
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="883612800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1998
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="852076800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1997
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="820454400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1996
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="788918400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1995
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="757382400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1994
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="725846400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1993
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="694224000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1992
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="662688000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1991
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="631152000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1990
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="599616000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1989
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="567993600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1988
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="536457600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1987
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="504921600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1986
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="473385600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1985
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="441763200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1984
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="410227200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1983
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="378691200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1982
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="347155200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1981
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="315532800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1980
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="283996800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1979
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="252460800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1978
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="220924800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1977
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="189302400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1976
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="157766400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1975
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="126230400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1974
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="94694400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1973
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="63072000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1972
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="31536000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1971
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="0"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1970
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-31536000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1969
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-63158400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1968
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-94694400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1967
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-126230400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1966
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-157766400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1965
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-189388800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1964
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-220924800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1963
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-252460800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1962
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-283996800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1961
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-315619200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1960
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-347155200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1959
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-378691200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1958
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-410227200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1957
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-441849600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1956
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-473385600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1955
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-504921600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1954
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-536457600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1953
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-568080000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1952
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-599616000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1951
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-631152000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1950
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-662688000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1949
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-694310400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1948
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-725846400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1947
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-757382400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1946
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-788918400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1945
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-820540800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1944
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-852076800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1943
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-883612800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1942
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-915148800000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1941
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-946771200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1940
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-978307200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1939
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-1009843200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1938
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-1041379200000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1937
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-1073001600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1936
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-1104537600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1935
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-1136073600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1934
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-1167609600000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1933
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-1199232000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1932
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-1230768000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1931
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-1262304000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1930
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-1293840000000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1929
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-1325462400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1928
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-1356998400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1927
             </span>
           </button>
           <button
             aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
+            class="component component component component component text text text size40 hug size40 button default button component"
             data-date="-1388534400000"
             tabindex="-1"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               1926
             </span>
@@ -2483,11 +2483,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
         class="component monthYear"
       >
         <button
-          class="component text size-40 hug size-40 component text component text button filled button month"
+          class="component component component component component text text text size40 hug size40 button filled button month component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             <span
               class="buttonContent"
@@ -2512,11 +2512,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
           </span>
         </button>
         <button
-          class="component text size-40 hug size-40 component text component text button filled button year"
+          class="component component component component component text text text size40 hug size40 button filled button year component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             <span
               class="buttonContent"
@@ -2603,11 +2603,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2630,11 +2630,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2655,11 +2655,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2680,11 +2680,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2705,11 +2705,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2730,11 +2730,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2755,11 +2755,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2780,11 +2780,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2807,11 +2807,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2832,11 +2832,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2857,11 +2857,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2882,11 +2882,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2907,11 +2907,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2932,11 +2932,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2957,11 +2957,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -2984,11 +2984,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3009,11 +3009,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3034,11 +3034,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3059,11 +3059,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3084,11 +3084,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3109,11 +3109,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3134,11 +3134,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3161,11 +3161,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3186,11 +3186,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3211,11 +3211,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3236,11 +3236,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3261,11 +3261,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3286,11 +3286,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3311,11 +3311,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3338,11 +3338,11 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="0"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded selected"
+                class="component component component component component text text text size40 hug size40 day rounded selected component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3386,12 +3386,12 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
       >
         <button
           aria-label="Предыдущий период"
-          class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component component border_32"
+          class="component component component component component text text text size48 hug size48 cc-icon-button arrow primary component component border_32 component"
           data-test-id="period-slider-btn-previous-day"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             <span
               class="iconWrapper size-32 center"
@@ -3419,12 +3419,12 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
         </span>
         <button
           aria-label="Следующий период"
-          class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component component border_32"
+          class="component component component component component text text text size48 hug size48 cc-icon-button arrow primary component component border_32 component"
           data-test-id="period-slider-btn-next-day"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             <span
               class="iconWrapper size-32 center"
@@ -3508,11 +3508,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3535,11 +3535,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3560,11 +3560,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3585,11 +3585,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3610,11 +3610,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3635,11 +3635,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3660,11 +3660,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3685,11 +3685,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3712,11 +3712,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3737,11 +3737,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3762,11 +3762,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3787,11 +3787,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3812,11 +3812,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3837,11 +3837,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3862,11 +3862,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3889,11 +3889,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3914,11 +3914,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3939,11 +3939,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3964,11 +3964,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -3989,11 +3989,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4014,11 +4014,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4039,11 +4039,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4066,11 +4066,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4091,11 +4091,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4116,11 +4116,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4141,11 +4141,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4166,11 +4166,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4191,11 +4191,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4216,11 +4216,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4243,11 +4243,11 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="0"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded selected"
+                class="component component component component component text text text size40 hug size40 day rounded selected component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4289,11 +4289,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
         class="component monthYear"
       >
         <button
-          class="component text size-40 hug size-40 component text component text button filled button month"
+          class="component component component component component text text text size40 hug size40 button filled button month component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             <span
               class="buttonContent"
@@ -4318,11 +4318,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
           </span>
         </button>
         <button
-          class="component text size-40 hug size-40 component text component text button filled button year"
+          class="component component component component component text text text size40 hug size40 button filled button year component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             <span
               class="buttonContent"
@@ -4409,11 +4409,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4436,11 +4436,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4461,11 +4461,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4486,11 +4486,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4511,11 +4511,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4536,11 +4536,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4561,11 +4561,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4586,11 +4586,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4613,11 +4613,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4638,11 +4638,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4663,11 +4663,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4688,11 +4688,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4713,11 +4713,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4738,11 +4738,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4763,11 +4763,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4790,11 +4790,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4815,11 +4815,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4840,11 +4840,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4865,11 +4865,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4890,11 +4890,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4915,11 +4915,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4940,11 +4940,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4967,11 +4967,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -4992,11 +4992,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -5017,11 +5017,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -5042,11 +5042,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -5067,11 +5067,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -5092,11 +5092,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -5117,11 +5117,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded"
+                class="component component component component component text text text size40 hug size40 day rounded component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
@@ -5144,11 +5144,11 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="0"
             >
               <button
-                class="component text size-40 hug size-40 component text component text day rounded selected"
+                class="component component component component component text text text size40 hug size40 day rounded selected component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="dayContent"
diff --git a/packages/calendar/src/components/period-slider/__snapshots__/Component.test.tsx.snap b/packages/calendar/src/components/period-slider/__snapshots__/Component.test.tsx.snap
index 38a20b3fb4..b28330d84e 100644
--- a/packages/calendar/src/components/period-slider/__snapshots__/Component.test.tsx.snap
+++ b/packages/calendar/src/components/period-slider/__snapshots__/Component.test.tsx.snap
@@ -9,13 +9,13 @@ exports[`PeriodSlider empty PeriodSlider empty PeriodSlider default title snapsh
   >
     <button
       aria-label="Предыдущий период"
-      class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component component border_32"
+      class="component component component component component text text text size48 hug size48 cc-icon-button arrow primary component component border_32 component"
       data-test-id="period-slider-btn-previous-day"
       disabled=""
       type="button"
     >
       <span
-        class="label stretchText"
+        class="label"
       >
         <span
           class="iconWrapper size-32 center"
@@ -43,13 +43,13 @@ exports[`PeriodSlider empty PeriodSlider empty PeriodSlider default title snapsh
     </span>
     <button
       aria-label="Следующий период"
-      class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component component border_32"
+      class="component component component component component text text text size48 hug size48 cc-icon-button arrow primary component component border_32 component"
       data-test-id="period-slider-btn-next-day"
       disabled=""
       type="button"
     >
       <span
-        class="label stretchText"
+        class="label"
       >
         <span
           class="iconWrapper size-32 center"
@@ -83,13 +83,13 @@ exports[`PeriodSlider empty PeriodSlider empty PeriodSlider specific title snaps
   >
     <button
       aria-label="Предыдущий период"
-      class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component component border_32"
+      class="component component component component component text text text size48 hug size48 cc-icon-button arrow primary component component border_32 component"
       data-test-id="period-slider-btn-previous-day"
       disabled=""
       type="button"
     >
       <span
-        class="label stretchText"
+        class="label"
       >
         <span
           class="iconWrapper size-32 center"
@@ -117,13 +117,13 @@ exports[`PeriodSlider empty PeriodSlider empty PeriodSlider specific title snaps
     </span>
     <button
       aria-label="Следующий период"
-      class="component text size-48 hug size-48 component text component text cc-icon-button arrow primary component component border_32"
+      class="component component component component component text text text size48 hug size48 cc-icon-button arrow primary component component border_32 component"
       data-test-id="period-slider-btn-next-day"
       disabled=""
       type="button"
     >
       <span
-        class="label stretchText"
+        class="label"
       >
         <span
           class="iconWrapper size-32 center"
diff --git a/packages/confirmation-v1/src/__snapshots__/Component.test.tsx.snap b/packages/confirmation-v1/src/__snapshots__/Component.test.tsx.snap
index 17ec893ba2..ea66a748fd 100644
--- a/packages/confirmation-v1/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/confirmation-v1/src/__snapshots__/Component.test.tsx.snap
@@ -136,11 +136,11 @@ exports[`Confirmation Snapshot tests should match snapshot with fatal error 1`]
         Выполните операцию с самого начала
       </span>
       <button
-        class="component secondary size-40 hug size-40 component secondary component secondary"
+        class="component component component component component secondary secondary secondary size40 hug size40 defaultPaddings defaultWidth minHeight component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           Понятно
         </span>
diff --git a/packages/confirmation/src/__snapshots__/Component.test.tsx.snap b/packages/confirmation/src/__snapshots__/Component.test.tsx.snap
index c42d6a3d2c..9e22e71242 100644
--- a/packages/confirmation/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/confirmation/src/__snapshots__/Component.test.tsx.snap
@@ -515,11 +515,11 @@ exports[`Confirmation Snapshot tests should match snapshot with FATAL_ERROR scre
         Мы ограничили следующие попытки ввода, потому что код был введён неверно больше 5 раз.
       </span>
       <button
-        class="component secondary size-48 hug size-48 component secondary component secondary button"
+        class="component component component component component secondary secondary secondary size48 hug size48 defaultPaddings defaultWidth minHeight button component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           Понятно
         </span>
@@ -595,11 +595,11 @@ exports[`Confirmation Snapshot tests should match snapshot with HINT screen 1`]
         Если номер не меняли, попробуйте запросить код позже — возможно, перегружен сервис отправки уведомлений.
       </span>
       <button
-        class="component secondary size-48 hug size-48 component secondary component secondary hintButton"
+        class="component component component component component secondary secondary secondary size48 hug size48 defaultPaddings defaultWidth minHeight hintButton component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           Вернуться к вводу кода
         </span>
@@ -676,11 +676,11 @@ exports[`Confirmation Snapshot tests should match snapshot with TEMP_BLOCK_OVER
         Теперь можно запросить новый код
       </span>
       <button
-        class="component secondary size-48 hug size-48 component secondary component secondary button"
+        class="component component component component component secondary secondary secondary size48 hug size48 defaultPaddings defaultWidth minHeight button component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           Запросить новый код
         </span>
diff --git a/packages/custom-button/src/__snapshots__/Component.test.tsx.snap b/packages/custom-button/src/__snapshots__/Component.test.tsx.snap
index c331e5d593..599ed27f34 100644
--- a/packages/custom-button/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/custom-button/src/__snapshots__/Component.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`CustomButton Snapshots tests should match snapshot 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
@@ -14,7 +14,7 @@ exports[`CustomButton Snapshots tests should match snapshot 1`] = `
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+      class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
       style="background: rgb(255, 69, 195);"
       type="button"
     />
@@ -79,14 +79,14 @@ exports[`CustomButton Snapshots tests should match snapshot 2`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
@@ -94,7 +94,7 @@ exports[`CustomButton Snapshots tests should match snapshot 2`] = `
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+      class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
       style="background: rgb(255, 69, 195);"
       type="button"
     />
@@ -159,21 +159,21 @@ exports[`CustomButton Snapshots tests should match snapshot 3`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
@@ -181,7 +181,7 @@ exports[`CustomButton Snapshots tests should match snapshot 3`] = `
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+      class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
       style="background: rgb(255, 69, 195);"
       type="button"
     />
@@ -246,7 +246,7 @@ exports[`CustomButton Snapshots tests should render CustomButton view=primary by
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
@@ -254,7 +254,7 @@ exports[`CustomButton Snapshots tests should render CustomButton view=primary by
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+      class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
       style="background: rgb(255, 69, 195);"
       type="button"
     />
@@ -319,14 +319,14 @@ exports[`CustomButton Snapshots tests should render CustomButton view=primary by
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
@@ -334,7 +334,7 @@ exports[`CustomButton Snapshots tests should render CustomButton view=primary by
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+      class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
       style="background: rgb(255, 69, 195);"
       type="button"
     />
@@ -399,21 +399,21 @@ exports[`CustomButton Snapshots tests should render CustomButton view=primary by
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
@@ -421,7 +421,7 @@ exports[`CustomButton Snapshots tests should render CustomButton view=primary by
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+      class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
       style="background: rgb(255, 69, 195);"
       type="button"
     />
@@ -486,7 +486,7 @@ exports[`CustomButton Snapshots tests should render black color content 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening disableType-default"
+        class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border black darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
@@ -494,7 +494,7 @@ exports[`CustomButton Snapshots tests should render black color content 1`] = `
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening disableType-default"
+      class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border black darkening disableType-default component"
       style="background: rgb(255, 69, 195);"
       type="button"
     />
@@ -559,14 +559,14 @@ exports[`CustomButton Snapshots tests should render black color content 2`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening disableType-default"
+        class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border black darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening disableType-default"
+        class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border black darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
@@ -574,7 +574,7 @@ exports[`CustomButton Snapshots tests should render black color content 2`] = `
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening disableType-default"
+      class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border black darkening disableType-default component"
       style="background: rgb(255, 69, 195);"
       type="button"
     />
@@ -639,21 +639,21 @@ exports[`CustomButton Snapshots tests should render black color content 3`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening disableType-default"
+        class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border black darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening disableType-default"
+        class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border black darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening disableType-default"
+        class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border black darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
@@ -661,7 +661,7 @@ exports[`CustomButton Snapshots tests should render black color content 3`] = `
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border black darkening disableType-default"
+      class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border black darkening disableType-default component"
       style="background: rgb(255, 69, 195);"
       type="button"
     />
@@ -726,7 +726,7 @@ exports[`CustomButton Snapshots tests should render custom background color 1`]
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
         style="background: rgb(0, 255, 0);"
         type="button"
       />
@@ -734,7 +734,7 @@ exports[`CustomButton Snapshots tests should render custom background color 1`]
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+      class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
       style="background: rgb(0, 255, 0);"
       type="button"
     />
@@ -799,14 +799,14 @@ exports[`CustomButton Snapshots tests should render custom background color 2`]
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
         style="background: rgb(0, 255, 0);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
         style="background: rgb(0, 255, 0);"
         type="button"
       />
@@ -814,7 +814,7 @@ exports[`CustomButton Snapshots tests should render custom background color 2`]
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+      class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
       style="background: rgb(0, 255, 0);"
       type="button"
     />
@@ -879,21 +879,21 @@ exports[`CustomButton Snapshots tests should render custom background color 3`]
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
         style="background: rgb(0, 255, 0);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
         style="background: rgb(0, 255, 0);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+        class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
         style="background: rgb(0, 255, 0);"
         type="button"
       />
@@ -901,7 +901,7 @@ exports[`CustomButton Snapshots tests should render custom background color 3`]
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly customButton border white darkening disableType-default"
+      class="component component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
       style="background: rgb(0, 255, 0);"
       type="button"
     />
@@ -966,7 +966,7 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 1`] =
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
+        class="component loading component component component component primary primary primary size56 hug size56 minWidth minHeight loading loading loading customButton border white darkening disableType-default customLoading component"
         disabled=""
         style="background: rgb(255, 69, 195);"
         type="button"
@@ -1012,7 +1012,7 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 1`] =
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
+      class="component loading component component component component primary primary primary size56 hug size56 minWidth minHeight loading loading loading customButton border white darkening disableType-default customLoading component"
       disabled=""
       style="background: rgb(255, 69, 195);"
       type="button"
@@ -1115,7 +1115,7 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 2`] =
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
+        class="component loading component component component component primary primary primary size56 hug size56 minWidth minHeight loading loading loading customButton border white darkening disableType-default customLoading component"
         disabled=""
         style="background: rgb(255, 69, 195);"
         type="button"
@@ -1160,7 +1160,7 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 2`] =
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
+        class="component loading component component component component primary primary primary size56 hug size56 minWidth minHeight loading loading loading customButton border white darkening disableType-default customLoading component"
         disabled=""
         style="background: rgb(255, 69, 195);"
         type="button"
@@ -1206,7 +1206,7 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 2`] =
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
+      class="component loading component component component component primary primary primary size56 hug size56 minWidth minHeight loading loading loading customButton border white darkening disableType-default customLoading component"
       disabled=""
       style="background: rgb(255, 69, 195);"
       type="button"
@@ -1309,7 +1309,7 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 3`] =
   "baseElement": <body>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
+        class="component loading component component component component primary primary primary size56 hug size56 minWidth minHeight loading loading loading customButton border white darkening disableType-default customLoading component"
         disabled=""
         style="background: rgb(255, 69, 195);"
         type="button"
@@ -1354,7 +1354,7 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 3`] =
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
+        class="component loading component component component component primary primary primary size56 hug size56 minWidth minHeight loading loading loading customButton border white darkening disableType-default customLoading component"
         disabled=""
         style="background: rgb(255, 69, 195);"
         type="button"
@@ -1399,7 +1399,7 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 3`] =
     </div>
     <div>
       <button
-        class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
+        class="component loading component component component component primary primary primary size56 hug size56 minWidth minHeight loading loading loading customButton border white darkening disableType-default customLoading component"
         disabled=""
         style="background: rgb(255, 69, 195);"
         type="button"
@@ -1445,7 +1445,7 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 3`] =
   </body>,
   "container": <div>
     <button
-      class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
+      class="component loading component component component component primary primary primary size56 hug size56 minWidth minHeight loading loading loading customButton border white darkening disableType-default customLoading component"
       disabled=""
       style="background: rgb(255, 69, 195);"
       type="button"
diff --git a/packages/custom-picker-button/src/Component.test.tsx b/packages/custom-picker-button/src/Component.test.tsx
index 0e8d4df595..55d8396dc1 100644
--- a/packages/custom-picker-button/src/Component.test.tsx
+++ b/packages/custom-picker-button/src/Component.test.tsx
@@ -144,7 +144,7 @@ describe('Render tests', () => {
             const button = document.querySelector('button');
             const icon = getByTestId('custom-picker-button-icon');
 
-            expect(button).toHaveClass('size-56');
+            expect(button).toHaveClass('size56');
             expect(button).toHaveClass('primary');
             expect(icon.getAttribute('width')).toBe(iconSize);
             expect(icon.getAttribute('height')).toBe(iconSize);
@@ -161,7 +161,7 @@ describe('Render tests', () => {
             const button = document.querySelector('button');
             const icon = getByTestId('custom-picker-button-icon');
 
-            expect(button).toHaveClass(`size-${size}`);
+            expect(button).toHaveClass(`size${size}`);
             expect(icon.getAttribute('width')).toBe(iconSize);
             expect(icon.getAttribute('height')).toBe(iconSize);
         },
diff --git a/packages/custom-picker-button/src/__snapshots__/Component.test.tsx.snap b/packages/custom-picker-button/src/__snapshots__/Component.test.tsx.snap
index 03b26f954d..d864f7468f 100644
--- a/packages/custom-picker-button/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/custom-picker-button/src/__snapshots__/Component.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Snapshots tests should display correctly 1`] = `
     <button
       aria-controls="downshift-:r0:-menu"
       aria-labelledby="downshift-:r0:-label"
-      class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border white darkening disableType-default"
+      class="component block component component component component primary primary primary size56 hug size56 defaultPaddings defaultWidth minHeight customButton border white darkening disableType-default component"
       id="downshift-:r0:-input"
       style="background: rgb(255, 69, 195);"
       tabindex="0"
@@ -29,7 +29,7 @@ exports[`Snapshots tests should display correctly 1`] = `
         </span>
       </span>
       <span
-        class="addons"
+        class="addon"
       >
         <span
           class="iconContainer"
@@ -66,7 +66,7 @@ exports[`Snapshots tests should display correctly 2`] = `
     <button
       aria-controls="downshift-:r4:-menu"
       aria-labelledby="downshift-:r4:-label"
-      class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border white darkening disableType-default"
+      class="component block component component component component primary primary primary size56 hug size56 defaultPaddings defaultWidth minHeight customButton border white darkening disableType-default component"
       id="downshift-:r4:-input"
       style="background: rgb(255, 69, 195);"
       tabindex="0"
@@ -83,7 +83,7 @@ exports[`Snapshots tests should display correctly 2`] = `
         </span>
       </span>
       <span
-        class="addons"
+        class="addon"
       >
         <span
           class="iconContainer"
@@ -120,7 +120,7 @@ exports[`Snapshots tests should display correctly 3`] = `
     <button
       aria-controls="downshift-:r8:-menu"
       aria-labelledby="downshift-:r8:-label"
-      class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border white darkening disableType-default"
+      class="component block component component component component primary primary primary size56 hug size56 defaultPaddings defaultWidth minHeight customButton border white darkening disableType-default component"
       id="downshift-:r8:-input"
       style="background: rgb(255, 69, 195);"
       tabindex="0"
@@ -137,7 +137,7 @@ exports[`Snapshots tests should display correctly 3`] = `
         </span>
       </span>
       <span
-        class="addons"
+        class="addon"
       >
         <span
           class="iconContainer"
@@ -174,14 +174,14 @@ exports[`Snapshots tests should display opened correctly 1`] = `
     <button
       aria-controls="downshift-:r3:-menu"
       aria-labelledby="downshift-:r3:-label"
-      class="component primary size-56 hug size-56 component primary component primary block iconOnly customButton border white darkening disableType-default"
+      class="component block component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
       id="downshift-:r3:-input"
       style="background: rgb(255, 69, 195);"
       tabindex="0"
       type="button"
     >
       <span
-        class="addons"
+        class="addon"
       >
         <span
           class="iconContainer open"
@@ -633,14 +633,14 @@ exports[`Snapshots tests should display opened correctly 3`] = `
     <button
       aria-controls="downshift-:r7:-menu"
       aria-labelledby="downshift-:r7:-label"
-      class="component primary size-56 hug size-56 component primary component primary block iconOnly customButton border white darkening disableType-default"
+      class="component block component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
       id="downshift-:r7:-input"
       style="background: rgb(255, 69, 195);"
       tabindex="0"
       type="button"
     >
       <span
-        class="addons"
+        class="addon"
       >
         <span
           class="iconContainer open"
@@ -1092,14 +1092,14 @@ exports[`Snapshots tests should display opened correctly 5`] = `
     <button
       aria-controls="downshift-:rb:-menu"
       aria-labelledby="downshift-:rb:-label"
-      class="component primary size-56 hug size-56 component primary component primary block iconOnly customButton border white darkening disableType-default"
+      class="component block component component component component primary primary primary size56 hug size56 minWidth minHeight customButton border white darkening disableType-default component"
       id="downshift-:rb:-input"
       style="background: rgb(255, 69, 195);"
       tabindex="0"
       type="button"
     >
       <span
-        class="addons"
+        class="addon"
       >
         <span
           class="iconContainer open"
@@ -1557,7 +1557,7 @@ exports[`Snapshots tests should render black color content 1`] = `
         <button
           aria-controls="downshift-:r2:-menu"
           aria-labelledby="downshift-:r2:-label"
-          class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border black darkening disableType-default"
+          class="component block component component component component primary primary primary size56 hug size56 defaultPaddings defaultWidth minHeight customButton border black darkening disableType-default component"
           id="downshift-:r2:-input"
           style="background: rgb(255, 69, 195);"
           tabindex="0"
@@ -1574,7 +1574,7 @@ exports[`Snapshots tests should render black color content 1`] = `
             </span>
           </span>
           <span
-            class="addons"
+            class="addon"
           >
             <span
               class="iconContainer"
@@ -1609,7 +1609,7 @@ exports[`Snapshots tests should render black color content 1`] = `
       <button
         aria-controls="downshift-:r2:-menu"
         aria-labelledby="downshift-:r2:-label"
-        class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border black darkening disableType-default"
+        class="component block component component component component primary primary primary size56 hug size56 defaultPaddings defaultWidth minHeight customButton border black darkening disableType-default component"
         id="downshift-:r2:-input"
         style="background: rgb(255, 69, 195);"
         tabindex="0"
@@ -1626,7 +1626,7 @@ exports[`Snapshots tests should render black color content 1`] = `
           </span>
         </span>
         <span
-          class="addons"
+          class="addon"
         >
           <span
             class="iconContainer"
@@ -1721,7 +1721,7 @@ exports[`Snapshots tests should render black color content 2`] = `
         <button
           aria-controls="downshift-:r6:-menu"
           aria-labelledby="downshift-:r6:-label"
-          class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border black darkening disableType-default"
+          class="component block component component component component primary primary primary size56 hug size56 defaultPaddings defaultWidth minHeight customButton border black darkening disableType-default component"
           id="downshift-:r6:-input"
           style="background: rgb(255, 69, 195);"
           tabindex="0"
@@ -1738,7 +1738,7 @@ exports[`Snapshots tests should render black color content 2`] = `
             </span>
           </span>
           <span
-            class="addons"
+            class="addon"
           >
             <span
               class="iconContainer"
@@ -1773,7 +1773,7 @@ exports[`Snapshots tests should render black color content 2`] = `
       <button
         aria-controls="downshift-:r6:-menu"
         aria-labelledby="downshift-:r6:-label"
-        class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border black darkening disableType-default"
+        class="component block component component component component primary primary primary size56 hug size56 defaultPaddings defaultWidth minHeight customButton border black darkening disableType-default component"
         id="downshift-:r6:-input"
         style="background: rgb(255, 69, 195);"
         tabindex="0"
@@ -1790,7 +1790,7 @@ exports[`Snapshots tests should render black color content 2`] = `
           </span>
         </span>
         <span
-          class="addons"
+          class="addon"
         >
           <span
             class="iconContainer"
@@ -1885,7 +1885,7 @@ exports[`Snapshots tests should render black color content 3`] = `
         <button
           aria-controls="downshift-:ra:-menu"
           aria-labelledby="downshift-:ra:-label"
-          class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border black darkening disableType-default"
+          class="component block component component component component primary primary primary size56 hug size56 defaultPaddings defaultWidth minHeight customButton border black darkening disableType-default component"
           id="downshift-:ra:-input"
           style="background: rgb(255, 69, 195);"
           tabindex="0"
@@ -1902,7 +1902,7 @@ exports[`Snapshots tests should render black color content 3`] = `
             </span>
           </span>
           <span
-            class="addons"
+            class="addon"
           >
             <span
               class="iconContainer"
@@ -1937,7 +1937,7 @@ exports[`Snapshots tests should render black color content 3`] = `
       <button
         aria-controls="downshift-:ra:-menu"
         aria-labelledby="downshift-:ra:-label"
-        class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border black darkening disableType-default"
+        class="component block component component component component primary primary primary size56 hug size56 defaultPaddings defaultWidth minHeight customButton border black darkening disableType-default component"
         id="downshift-:ra:-input"
         style="background: rgb(255, 69, 195);"
         tabindex="0"
@@ -1954,7 +1954,7 @@ exports[`Snapshots tests should render black color content 3`] = `
           </span>
         </span>
         <span
-          class="addons"
+          class="addon"
         >
           <span
             class="iconContainer"
@@ -2049,7 +2049,7 @@ exports[`Snapshots tests should render custom background color 1`] = `
         <button
           aria-controls="downshift-:r1:-menu"
           aria-labelledby="downshift-:r1:-label"
-          class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border white darkening disableType-default"
+          class="component block component component component component primary primary primary size56 hug size56 defaultPaddings defaultWidth minHeight customButton border white darkening disableType-default component"
           id="downshift-:r1:-input"
           style="background: rgb(0, 255, 0);"
           tabindex="0"
@@ -2066,7 +2066,7 @@ exports[`Snapshots tests should render custom background color 1`] = `
             </span>
           </span>
           <span
-            class="addons"
+            class="addon"
           >
             <span
               class="iconContainer"
@@ -2101,7 +2101,7 @@ exports[`Snapshots tests should render custom background color 1`] = `
       <button
         aria-controls="downshift-:r1:-menu"
         aria-labelledby="downshift-:r1:-label"
-        class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border white darkening disableType-default"
+        class="component block component component component component primary primary primary size56 hug size56 defaultPaddings defaultWidth minHeight customButton border white darkening disableType-default component"
         id="downshift-:r1:-input"
         style="background: rgb(0, 255, 0);"
         tabindex="0"
@@ -2118,7 +2118,7 @@ exports[`Snapshots tests should render custom background color 1`] = `
           </span>
         </span>
         <span
-          class="addons"
+          class="addon"
         >
           <span
             class="iconContainer"
@@ -2213,7 +2213,7 @@ exports[`Snapshots tests should render custom background color 2`] = `
         <button
           aria-controls="downshift-:r5:-menu"
           aria-labelledby="downshift-:r5:-label"
-          class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border white darkening disableType-default"
+          class="component block component component component component primary primary primary size56 hug size56 defaultPaddings defaultWidth minHeight customButton border white darkening disableType-default component"
           id="downshift-:r5:-input"
           style="background: rgb(0, 255, 0);"
           tabindex="0"
@@ -2230,7 +2230,7 @@ exports[`Snapshots tests should render custom background color 2`] = `
             </span>
           </span>
           <span
-            class="addons"
+            class="addon"
           >
             <span
               class="iconContainer"
@@ -2265,7 +2265,7 @@ exports[`Snapshots tests should render custom background color 2`] = `
       <button
         aria-controls="downshift-:r5:-menu"
         aria-labelledby="downshift-:r5:-label"
-        class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border white darkening disableType-default"
+        class="component block component component component component primary primary primary size56 hug size56 defaultPaddings defaultWidth minHeight customButton border white darkening disableType-default component"
         id="downshift-:r5:-input"
         style="background: rgb(0, 255, 0);"
         tabindex="0"
@@ -2282,7 +2282,7 @@ exports[`Snapshots tests should render custom background color 2`] = `
           </span>
         </span>
         <span
-          class="addons"
+          class="addon"
         >
           <span
             class="iconContainer"
@@ -2377,7 +2377,7 @@ exports[`Snapshots tests should render custom background color 3`] = `
         <button
           aria-controls="downshift-:r9:-menu"
           aria-labelledby="downshift-:r9:-label"
-          class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border white darkening disableType-default"
+          class="component block component component component component primary primary primary size56 hug size56 defaultPaddings defaultWidth minHeight customButton border white darkening disableType-default component"
           id="downshift-:r9:-input"
           style="background: rgb(0, 255, 0);"
           tabindex="0"
@@ -2394,7 +2394,7 @@ exports[`Snapshots tests should render custom background color 3`] = `
             </span>
           </span>
           <span
-            class="addons"
+            class="addon"
           >
             <span
               class="iconContainer"
@@ -2429,7 +2429,7 @@ exports[`Snapshots tests should render custom background color 3`] = `
       <button
         aria-controls="downshift-:r9:-menu"
         aria-labelledby="downshift-:r9:-label"
-        class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border white darkening disableType-default"
+        class="component block component component component component primary primary primary size56 hug size56 defaultPaddings defaultWidth minHeight customButton border white darkening disableType-default component"
         id="downshift-:r9:-input"
         style="background: rgb(0, 255, 0);"
         tabindex="0"
@@ -2446,7 +2446,7 @@ exports[`Snapshots tests should render custom background color 3`] = `
           </span>
         </span>
         <span
-          class="addons"
+          class="addon"
         >
           <span
             class="iconContainer"
diff --git a/packages/file-upload-item-v1/src/__snapshots__/Component.test.tsx.snap b/packages/file-upload-item-v1/src/__snapshots__/Component.test.tsx.snap
index b9de21e4a4..3b6367ee51 100644
--- a/packages/file-upload-item-v1/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/file-upload-item-v1/src/__snapshots__/Component.test.tsx.snap
@@ -49,13 +49,14 @@ exports[`FileUploadItemV1 Snapshots tests should match snapshot 1`] = `
           </div>
         </div>
         <a
+          aria-disabled="false"
           aria-label="скачать"
-          class="component text size-48 hug size-48 component text component text cc-icon-button download primary component component border_24"
+          class="component component component component component text text text size48 hug size48 cc-icon-button download primary component component border_24 component"
           download="новое_название_файла"
           href="/link"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             <span
               class="iconWrapper size-24 center"
@@ -78,11 +79,11 @@ exports[`FileUploadItemV1 Snapshots tests should match snapshot 1`] = `
         </a>
         <button
           aria-label="удалить"
-          class="component text size-48 hug size-48 component text component text cc-icon-button delete primary component component border_24"
+          class="component component component component component text text text size48 hug size48 cc-icon-button delete primary component component border_24 component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             <span
               class="iconWrapper size-24 center"
@@ -151,13 +152,14 @@ exports[`FileUploadItemV1 Snapshots tests should match snapshot 1`] = `
         </div>
       </div>
       <a
+        aria-disabled="false"
         aria-label="скачать"
-        class="component text size-48 hug size-48 component text component text cc-icon-button download primary component component border_24"
+        class="component component component component component text text text size48 hug size48 cc-icon-button download primary component component border_24 component"
         download="новое_название_файла"
         href="/link"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           <span
             class="iconWrapper size-24 center"
@@ -180,11 +182,11 @@ exports[`FileUploadItemV1 Snapshots tests should match snapshot 1`] = `
       </a>
       <button
         aria-label="удалить"
-        class="component text size-48 hug size-48 component text component text cc-icon-button delete primary component component border_24"
+        class="component component component component component text text text size48 hug size48 cc-icon-button delete primary component component border_24 component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           <span
             class="iconWrapper size-24 center"
diff --git a/packages/icon-button/src/__snapshots__/Component.test.tsx.snap b/packages/icon-button/src/__snapshots__/Component.test.tsx.snap
index 1c39fc51df..dd4f1958b5 100644
--- a/packages/icon-button/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/icon-button/src/__snapshots__/Component.test.tsx.snap
@@ -6,12 +6,13 @@ exports[`IconButton Href tests should set \`href\` attribute and be link 1`] = `
   "baseElement": <body>
     <div>
       <a
-        class="component text size-48 hug size-48 component text component text cc-icon-button primary component component border_48"
+        aria-disabled="false"
+        class="component component component component component text text text size48 hug size48 cc-icon-button primary component component border_48 component"
         data-test-id="test-id"
         href="http://example.com"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           <span
             class="iconWrapper size-48 center"
@@ -36,12 +37,13 @@ exports[`IconButton Href tests should set \`href\` attribute and be link 1`] = `
   </body>,
   "container": <div>
     <a
-      class="component text size-48 hug size-48 component text component text cc-icon-button primary component component border_48"
+      aria-disabled="false"
+      class="component component component component component text text text size48 hug size48 cc-icon-button primary component component border_48 component"
       data-test-id="test-id"
       href="http://example.com"
     >
       <span
-        class="label stretchText"
+        class="label"
       >
         <span
           class="iconWrapper size-48 center"
@@ -123,11 +125,11 @@ exports[`IconButton Snapshots tests should match snapshot 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component text size-48 hug size-48 component text component text cc-icon-button primary component component border_48"
+        class="component component component component component text text text size48 hug size48 cc-icon-button primary component component border_48 component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           <span
             class="iconWrapper size-48 center"
@@ -152,11 +154,11 @@ exports[`IconButton Snapshots tests should match snapshot 1`] = `
   </body>,
   "container": <div>
     <button
-      class="component text size-48 hug size-48 component text component text cc-icon-button primary component component border_48"
+      class="component component component component component text text text size48 hug size48 cc-icon-button primary component component border_48 component"
       type="button"
     >
       <span
-        class="label stretchText"
+        class="label"
       >
         <span
           class="iconWrapper size-48 center"
diff --git a/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap b/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap
index 4eb0d91878..3fd4eabf86 100644
--- a/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap
@@ -145,11 +145,11 @@ exports[`InputAutocompleteMobile Snapshots tests should match snapshot in open s
                             >
                               <button
                                 aria-label="закрыть"
-                                class="component text size-48 hug size-48 component text component text cc-icon-button button button mobile primary component component border_32"
+                                class="component component component component component text text text size48 hug size48 cc-icon-button button button mobile primary component component border_32 component"
                                 type="button"
                               >
                                 <span
-                                  class="label stretchText"
+                                  class="label"
                                 >
                                   <span
                                     class="iconWrapper size-32 center"
@@ -293,21 +293,21 @@ exports[`InputAutocompleteMobile Snapshots tests should match snapshot in open s
                               tabindex="0"
                             >
                               <button
-                                class="component secondary size-56 hug size-56 component secondary component secondary button"
+                                class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button component"
                                 type="button"
                               >
                                 <span
-                                  class="label stretchText"
+                                  class="label"
                                 >
                                   Отмена
                                 </span>
                               </button>
                               <button
-                                class="component primary size-56 hug size-56 component primary component primary button"
+                                class="component component component component component primary primary primary size56 hug size56 defaultPaddings defaultWidth minHeight button component"
                                 type="button"
                               >
                                 <span
-                                  class="label stretchText"
+                                  class="label"
                                 >
                                   Продолжить
                                 </span>
diff --git a/packages/modal/src/__snapshots__/Component.test.tsx.snap b/packages/modal/src/__snapshots__/Component.test.tsx.snap
index dc83e6cb57..d1b68c45c2 100644
--- a/packages/modal/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/modal/src/__snapshots__/Component.test.tsx.snap
@@ -27,11 +27,11 @@ exports[`ModalDesktop snapshots tests should match snapshot 1`] = `
             >
               <button
                 aria-label="назад"
-                class="component text size-48 hug size-48 component text component text component component"
+                class="component component component component component text text text size48 hug size48 component component component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <div
                     class="flex"
@@ -74,11 +74,11 @@ exports[`ModalDesktop snapshots tests should match snapshot 1`] = `
               >
                 <button
                   aria-label="закрыть"
-                  class="component text size-48 hug size-48 component text component text cc-icon-button button button primary component component border_48"
+                  class="component component component component component text text text size48 hug size48 cc-icon-button button button primary component component border_48 component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="iconWrapper size-48 center"
@@ -165,11 +165,11 @@ exports[`ModalMobile snapshots tests should match snapshot 1`] = `
             >
               <button
                 aria-label="назад"
-                class="component text size-32 hug size-32 component text component text component component mobileComponent"
+                class="component component component component component text text text size32 hug size32 component component mobileComponent component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <div
                     class="flex"
@@ -212,11 +212,11 @@ exports[`ModalMobile snapshots tests should match snapshot 1`] = `
               >
                 <button
                   aria-label="закрыть"
-                  class="component text size-48 hug size-48 component text component text cc-icon-button button button mobile primary component component border_32"
+                  class="component component component component component text text text size48 hug size48 cc-icon-button button button mobile primary component component border_32 component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <span
                       class="iconWrapper size-32 center"
diff --git a/packages/navigation-bar-private/src/__snapshots__/Component.test.tsx.snap b/packages/navigation-bar-private/src/__snapshots__/Component.test.tsx.snap
index 4367b86fee..0488d5913b 100644
--- a/packages/navigation-bar-private/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/navigation-bar-private/src/__snapshots__/Component.test.tsx.snap
@@ -18,12 +18,12 @@ exports[`Navigation Bar Snapshots tests should match snapshot 1`] = `
           >
             <button
               aria-label="назад"
-              class="component text size-48 hug size-48 component text component text component component"
+              class="component component component component component text text text size48 hug size48 component component component"
               data-test-id="navigation-bar-dti-back-button"
               type="button"
             >
               <span
-                class="label stretchText"
+                class="label"
               >
                 <div
                   class="flex"
@@ -66,12 +66,12 @@ exports[`Navigation Bar Snapshots tests should match snapshot 1`] = `
             >
               <button
                 aria-label="закрыть"
-                class="component text size-48 hug size-48 component text component text cc-icon-button button button primary component component border_48"
+                class="component component component component component text text text size48 hug size48 cc-icon-button button button primary component component border_48 component"
                 data-test-id="navigation-bar-dti-closer"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="iconWrapper size-48 center"
diff --git a/packages/notification-manager/src/__snapshots__/component.test.tsx.snap b/packages/notification-manager/src/__snapshots__/component.test.tsx.snap
index 9e58de515f..6481b45f91 100644
--- a/packages/notification-manager/src/__snapshots__/component.test.tsx.snap
+++ b/packages/notification-manager/src/__snapshots__/component.test.tsx.snap
@@ -57,11 +57,11 @@ exports[`NotificationManager Snapshots tests should match snapshot 1`] = `
             >
               <button
                 aria-label="закрыть"
-                class="component text size-48 hug size-48 component text component text cc-icon-button closeButton closeButton primary component component border_48"
+                class="component component component component component text text text size48 hug size48 cc-icon-button closeButton closeButton primary component component border_48 component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="iconWrapper size-48 center"
@@ -120,11 +120,11 @@ exports[`NotificationManager Snapshots tests should match snapshot 1`] = `
             >
               <button
                 aria-label="закрыть"
-                class="component text size-48 hug size-48 component text component text cc-icon-button closeButton closeButton primary component component border_48"
+                class="component component component component component text text text size48 hug size48 cc-icon-button closeButton closeButton primary component component border_48 component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="iconWrapper size-48 center"
@@ -183,11 +183,11 @@ exports[`NotificationManager Snapshots tests should match snapshot 1`] = `
             >
               <button
                 aria-label="закрыть"
-                class="component text size-48 hug size-48 component text component text cc-icon-button closeButton closeButton primary component component border_48"
+                class="component component component component component text text text size48 hug size48 cc-icon-button closeButton closeButton primary component component border_48 component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  class="label"
                 >
                   <span
                     class="iconWrapper size-48 center"
diff --git a/packages/notification/src/__snapshots__/Component.test.tsx.snap b/packages/notification/src/__snapshots__/Component.test.tsx.snap
index 5e4d2859a7..6d04068aee 100644
--- a/packages/notification/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/notification/src/__snapshots__/Component.test.tsx.snap
@@ -67,11 +67,11 @@ exports[`Notification Snapshots tests should match snapshot 1`] = `
           >
             <button
               aria-label="закрыть"
-              class="component text size-48 hug size-48 component text component text cc-icon-button closeButton closeButton primary component component border_48"
+              class="component component component component component text text text size48 hug size48 cc-icon-button closeButton closeButton primary component component border_48 component"
               type="button"
             >
               <span
-                class="label stretchText"
+                class="label"
               >
                 <span
                   class="iconWrapper size-48 center"
diff --git a/packages/pass-code-v1/src/__snapshots__/component.test.tsx.snap b/packages/pass-code-v1/src/__snapshots__/component.test.tsx.snap
index f2b2194062..97a9d3d703 100644
--- a/packages/pass-code-v1/src/__snapshots__/component.test.tsx.snap
+++ b/packages/pass-code-v1/src/__snapshots__/component.test.tsx.snap
@@ -39,11 +39,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with code length 1`] =
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             1
           </span>
@@ -53,11 +53,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with code length 1`] =
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             2
           </span>
@@ -67,11 +67,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with code length 1`] =
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             3
           </span>
@@ -81,11 +81,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with code length 1`] =
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             4
           </span>
@@ -95,11 +95,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with code length 1`] =
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             5
           </span>
@@ -109,11 +109,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with code length 1`] =
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             6
           </span>
@@ -123,11 +123,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with code length 1`] =
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             7
           </span>
@@ -137,11 +137,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with code length 1`] =
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             8
           </span>
@@ -151,11 +151,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with code length 1`] =
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             9
           </span>
@@ -166,10 +166,14 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with code length 1`] =
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary iconOnly button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
-          0
+          <span
+            class="label"
+          >
+            0
+          </span>
         </button>
       </div>
       <div />
@@ -206,11 +210,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with error prop 1`] = `
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             1
           </span>
@@ -220,11 +224,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with error prop 1`] = `
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             2
           </span>
@@ -234,11 +238,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with error prop 1`] = `
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             3
           </span>
@@ -248,11 +252,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with error prop 1`] = `
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             4
           </span>
@@ -262,11 +266,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with error prop 1`] = `
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             5
           </span>
@@ -276,11 +280,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with error prop 1`] = `
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             6
           </span>
@@ -290,11 +294,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with error prop 1`] = `
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             7
           </span>
@@ -304,11 +308,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with error prop 1`] = `
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             8
           </span>
@@ -318,11 +322,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with error prop 1`] = `
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             9
           </span>
@@ -333,21 +337,25 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with error prop 1`] = `
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary iconOnly button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
-          0
+          <span
+            class="label"
+          >
+            0
+          </span>
         </button>
       </div>
       <div
         class="component"
       >
         <button
-          class="component text size-56 hug size-56 component text component text button text"
+          class="component component component component component text text text size56 hug size56 button text component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             <svg
               fill="currentColor"
@@ -400,11 +408,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with unknown code lengt
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             1
           </span>
@@ -414,11 +422,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with unknown code lengt
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             2
           </span>
@@ -428,11 +436,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with unknown code lengt
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             3
           </span>
@@ -442,11 +450,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with unknown code lengt
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             4
           </span>
@@ -456,11 +464,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with unknown code lengt
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             5
           </span>
@@ -470,11 +478,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with unknown code lengt
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             6
           </span>
@@ -484,11 +492,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with unknown code lengt
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             7
           </span>
@@ -498,11 +506,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with unknown code lengt
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             8
           </span>
@@ -512,11 +520,11 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with unknown code lengt
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
           <span
-            class="label stretchText"
+            class="label"
           >
             9
           </span>
@@ -527,10 +535,14 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with unknown code lengt
         class="component"
       >
         <button
-          class="component secondary size-56 hug size-56 component secondary component secondary iconOnly button secondary digit"
+          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
           type="button"
         >
-          0
+          <span
+            class="label"
+          >
+            0
+          </span>
         </button>
       </div>
       <div />
diff --git a/packages/pass-code/src/__snapshots__/component.test.tsx.snap b/packages/pass-code/src/__snapshots__/component.test.tsx.snap
index 0fdc1d4e03..8f8164dda9 100644
--- a/packages/pass-code/src/__snapshots__/component.test.tsx.snap
+++ b/packages/pass-code/src/__snapshots__/component.test.tsx.snap
@@ -53,101 +53,105 @@ exports[`PassCode Snapshot tests should match snapshot with code length 1`] = `
       class="component"
     >
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           1
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           2
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           3
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           4
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           5
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           6
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           7
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           8
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           9
         </span>
       </button>
       <div />
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary iconOnly button secondary digit"
+        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
         type="button"
       >
-        0
+        <span
+          class="label"
+        >
+          0
+        </span>
       </button>
       <div />
     </div>
@@ -179,101 +183,105 @@ exports[`PassCode Snapshot tests should match snapshot with unknown code length
       class="component"
     >
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           1
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           2
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           3
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           4
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           5
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           6
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           7
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           8
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
         type="button"
       >
         <span
-          class="label stretchText"
+          class="label"
         >
           9
         </span>
       </button>
       <div />
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary iconOnly button secondary digit"
+        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
         type="button"
       >
-        0
+        <span
+          class="label"
+        >
+          0
+        </span>
       </button>
       <div />
     </div>
diff --git a/packages/password-input/src/__snapshots__/component.test.tsx.snap b/packages/password-input/src/__snapshots__/component.test.tsx.snap
index 3c73293a09..d13456d044 100644
--- a/packages/password-input/src/__snapshots__/component.test.tsx.snap
+++ b/packages/password-input/src/__snapshots__/component.test.tsx.snap
@@ -26,12 +26,12 @@ exports[`PasswordInput snapshots tests should match snapshot 1`] = `
           class="addons rightAddons rightAddons size-48"
         >
           <button
-            class="component text size-48 hug size-48 component text component text cc-icon-button eye secondary component component border_24"
+            class="component component component component component text text text size48 hug size48 cc-icon-button eye secondary component component border_24 component"
             title="Показать"
             type="button"
           >
             <span
-              class="label stretchText"
+              class="label"
             >
               <span
                 class="iconWrapper size-24 center"
diff --git a/packages/picker-button/src/Component.test.tsx b/packages/picker-button/src/Component.test.tsx
index 4898347365..2200de719a 100644
--- a/packages/picker-button/src/Component.test.tsx
+++ b/packages/picker-button/src/Component.test.tsx
@@ -118,7 +118,7 @@ describe('Render tests', () => {
             const button = document.querySelector('button');
             const icon = getByTestId('picker-button-icon');
 
-            expect(button).toHaveClass('size-56');
+            expect(button).toHaveClass('size56');
             expect(button).toHaveClass('secondary');
             expect(icon.getAttribute('width')).toBe(iconSize);
             expect(icon.getAttribute('height')).toBe(iconSize);
@@ -133,7 +133,7 @@ describe('Render tests', () => {
         const button = document.querySelector('button');
         const icon = getByTestId('picker-button-icon');
 
-        expect(button).toHaveClass(`size-${size}`);
+        expect(button).toHaveClass(`size${size}`);
         expect(icon.getAttribute('width')).toBe(iconSize);
         expect(icon.getAttribute('height')).toBe(iconSize);
     });
diff --git a/packages/picker-button/src/__snapshots__/Component.test.tsx.snap b/packages/picker-button/src/__snapshots__/Component.test.tsx.snap
index 460fc2d468..2ca8b8b20d 100644
--- a/packages/picker-button/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/picker-button/src/__snapshots__/Component.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`Snapshots tests should display correctly 1`] = `
       <button
         aria-controls="downshift-:r0:-menu"
         aria-labelledby="downshift-:r0:-label"
-        class="component secondary size-56 hug size-56 component secondary component secondary block withRightAddons"
+        class="component block component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight component"
         id="downshift-:r0:-input"
         tabindex="0"
         type="button"
@@ -29,7 +29,7 @@ exports[`Snapshots tests should display correctly 1`] = `
           </span>
         </span>
         <span
-          class="addons"
+          class="addon"
         >
           <span
             class="iconContainer"
@@ -68,7 +68,7 @@ exports[`Snapshots tests should display correctly 2`] = `
       <button
         aria-controls="downshift-:r2:-menu"
         aria-labelledby="downshift-:r2:-label"
-        class="component secondary size-56 hug size-56 component secondary component secondary block withRightAddons"
+        class="component block component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight component"
         id="downshift-:r2:-input"
         tabindex="0"
         type="button"
@@ -84,7 +84,7 @@ exports[`Snapshots tests should display correctly 2`] = `
           </span>
         </span>
         <span
-          class="addons"
+          class="addon"
         >
           <span
             class="iconContainer"
@@ -123,7 +123,7 @@ exports[`Snapshots tests should display correctly 3`] = `
       <button
         aria-controls="downshift-:r4:-menu"
         aria-labelledby="downshift-:r4:-label"
-        class="component secondary size-56 hug size-56 component secondary component secondary block withRightAddons"
+        class="component block component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight component"
         id="downshift-:r4:-input"
         tabindex="0"
         type="button"
@@ -139,7 +139,7 @@ exports[`Snapshots tests should display correctly 3`] = `
           </span>
         </span>
         <span
-          class="addons"
+          class="addon"
         >
           <span
             class="iconContainer"
@@ -178,13 +178,13 @@ exports[`Snapshots tests should display opened correctly 1`] = `
       <button
         aria-controls="downshift-:r1:-menu"
         aria-labelledby="downshift-:r1:-label"
-        class="component secondary size-56 hug size-56 component secondary component secondary block iconOnly"
+        class="component block component component component component secondary secondary secondary size56 hug size56 minWidth minHeight component"
         id="downshift-:r1:-input"
         tabindex="0"
         type="button"
       >
         <span
-          class="addons"
+          class="addon"
         >
           <span
             class="iconContainer open"
@@ -223,13 +223,13 @@ exports[`Snapshots tests should display opened correctly 2`] = `
       <button
         aria-controls="downshift-:r1:-menu"
         aria-labelledby="downshift-:r1:-label"
-        class="component secondary size-56 hug size-56 component secondary component secondary block iconOnly"
+        class="component block component component component component secondary secondary secondary size56 hug size56 minWidth minHeight component"
         id="downshift-:r1:-input"
         tabindex="0"
         type="button"
       >
         <span
-          class="addons"
+          class="addon"
         >
           <span
             class="iconContainer open"
@@ -268,13 +268,13 @@ exports[`Snapshots tests should display opened correctly 3`] = `
       <button
         aria-controls="downshift-:r3:-menu"
         aria-labelledby="downshift-:r3:-label"
-        class="component secondary size-56 hug size-56 component secondary component secondary block iconOnly"
+        class="component block component component component component secondary secondary secondary size56 hug size56 minWidth minHeight component"
         id="downshift-:r3:-input"
         tabindex="0"
         type="button"
       >
         <span
-          class="addons"
+          class="addon"
         >
           <span
             class="iconContainer open"
@@ -360,11 +360,11 @@ exports[`Snapshots tests should display opened correctly 4`] = `
                           >
                             <button
                               aria-label="закрыть"
-                              class="component text size-48 hug size-48 component text component text cc-icon-button button button mobile primary component component border_32"
+                              class="component component component component component text text text size48 hug size48 cc-icon-button button button mobile primary component component border_32 component"
                               type="button"
                             >
                               <span
-                                class="label stretchText"
+                                class="label"
                               >
                                 <span
                                   class="iconWrapper size-32 center"
@@ -759,13 +759,13 @@ exports[`Snapshots tests should display opened correctly 5`] = `
       <button
         aria-controls="downshift-:r5:-menu"
         aria-labelledby="downshift-:r5:-label"
-        class="component secondary size-56 hug size-56 component secondary component secondary block iconOnly"
+        class="component block component component component component secondary secondary secondary size56 hug size56 minWidth minHeight component"
         id="downshift-:r5:-input"
         tabindex="0"
         type="button"
       >
         <span
-          class="addons"
+          class="addon"
         >
           <span
             class="iconContainer open"
@@ -851,11 +851,11 @@ exports[`Snapshots tests should display opened correctly 6`] = `
                           >
                             <button
                               aria-label="закрыть"
-                              class="component text size-48 hug size-48 component text component text cc-icon-button button button mobile primary component component border_32"
+                              class="component component component component component text text text size48 hug size48 cc-icon-button button button mobile primary component component border_32 component"
                               type="button"
                             >
                               <span
-                                class="label stretchText"
+                                class="label"
                               >
                                 <span
                                   class="iconWrapper size-32 center"
diff --git a/packages/plate/src/Component.test.tsx b/packages/plate/src/Component.test.tsx
index f97b347b9a..f84e552a8d 100644
--- a/packages/plate/src/Component.test.tsx
+++ b/packages/plate/src/Component.test.tsx
@@ -69,9 +69,9 @@ describe('Plate', () => {
         expect(queryByTestId('button-2')).toBeInTheDocument();
         expect(queryByTestId('button-3')).toBeInTheDocument();
 
-        expect(queryByTestId('button-1')).toHaveClass(`size-${size}`);
-        expect(queryByTestId('button-2')).toHaveClass(`size-${size}`);
-        expect(queryByTestId('button-3')).toHaveClass(`size-${size}`);
+        expect(queryByTestId('button-1')).toHaveClass(`size${size}`);
+        expect(queryByTestId('button-2')).toHaveClass(`size${size}`);
+        expect(queryByTestId('button-3')).toHaveClass(`size${size}`);
 
         expect(queryByTestId('button-1')).toHaveClass('secondary');
         expect(queryByTestId('button-2')).toHaveClass('transparent');
diff --git a/packages/side-panel/src/__snapshots__/Component.test.tsx.snap b/packages/side-panel/src/__snapshots__/Component.test.tsx.snap
index a9f447f373..cb3dc71511 100644
--- a/packages/side-panel/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/side-panel/src/__snapshots__/Component.test.tsx.snap
@@ -30,11 +30,11 @@ exports[`SidePanelDesktop snapshots tests should match snapshot 1`] = `
               >
                 <button
                   aria-label="назад"
-                  class="component text size-48 hug size-48 component text component text component component"
+                  class="component component component component component text text text size48 hug size48 component component component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <div
                       class="flex"
@@ -77,11 +77,11 @@ exports[`SidePanelDesktop snapshots tests should match snapshot 1`] = `
                 >
                   <button
                     aria-label="закрыть"
-                    class="component text size-48 hug size-48 component text component text cc-icon-button button button primary component component border_48"
+                    class="component component component component component text text text size48 hug size48 cc-icon-button button button primary component component border_48 component"
                     type="button"
                   >
                     <span
-                      class="label stretchText"
+                      class="label"
                     >
                       <span
                         class="iconWrapper size-48 center"
@@ -172,11 +172,11 @@ exports[`SidePanelMobile snapshots tests should match snapshot 1`] = `
               >
                 <button
                   aria-label="назад"
-                  class="component text size-32 hug size-32 component text component text component component mobileComponent"
+                  class="component component component component component text text text size32 hug size32 component component mobileComponent component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    class="label"
                   >
                     <div
                       class="flex"
@@ -219,11 +219,11 @@ exports[`SidePanelMobile snapshots tests should match snapshot 1`] = `
                 >
                   <button
                     aria-label="закрыть"
-                    class="component text size-48 hug size-48 component text component text cc-icon-button button button mobile primary component component border_32"
+                    class="component component component component component text text text size48 hug size48 cc-icon-button button button mobile primary component component border_32 component"
                     type="button"
                   >
                     <span
-                      class="label stretchText"
+                      class="label"
                     >
                       <span
                         class="iconWrapper size-32 center"
diff --git a/packages/vars/src/mixins.css b/packages/vars/src/mixins.css
index 88b145fbe3..ff406eafc6 100644
--- a/packages/vars/src/mixins.css
+++ b/packages/vars/src/mixins.css
@@ -119,3 +119,16 @@
     -webkit-box-orient: vertical;
     overflow: hidden;
 }
+
+@define-mixin disabled {
+    &:disabled,
+    &.disabled {
+        @mixin-content;
+    }
+}
+
+@define-mixin not-disabled {
+    &:not(:disabled):not(.disabled) {
+        @mixin-content;
+    }
+}

From 6c2b540f49326462c1aa4ddd657b52a62d332cd5 Mon Sep 17 00:00:00 2001
From: hextion <100ishundred@gmail.com>
Date: Tue, 7 Oct 2025 14:45:38 +0300
Subject: [PATCH 2/7] refactor(icon-button): used BaseButtonCandidate

---
 .../src/__snapshots__/Component.test.tsx.snap | 136 +++++++--------
 .../src/__snapshots__/Component.test.tsx.snap |  68 ++++----
 .../__snapshots__/Component.test.tsx.snap     | 128 ++++++--------
 .../src/__snapshots__/Component.test.tsx.snap | 128 ++++++--------
 ...eenshots-disabled-view-2-colors-0-snap.png |   4 +-
 ...eenshots-disabled-view-2-colors-1-snap.png |   4 +-
 .../src/__snapshots__/Component.test.tsx.snap | 120 ++++++-------
 .../components/base-icon-button/Component.tsx |  30 ++--
 .../base-icon-button/default.module.css       | 164 ++++++++++--------
 .../base-icon-button/inverted.module.css      | 164 ++++++++++--------
 .../src/desktop/Component.desktop.tsx         |   4 +-
 .../src/mobile/Component.mobile.tsx           |   4 +-
 .../src/__snapshots__/Component.test.tsx.snap |  32 ++--
 .../src/__snapshots__/Component.test.tsx.snap |  64 +++----
 .../src/__snapshots__/Component.test.tsx.snap |  32 ++--
 .../src/__snapshots__/component.test.tsx.snap |  96 +++++-----
 .../src/__snapshots__/Component.test.tsx.snap |  32 ++--
 .../components/KeyPadButton/index.module.css  |  92 +++++-----
 .../src/__snapshots__/component.test.tsx.snap |  42 ++---
 .../src/__snapshots__/Component.test.tsx.snap |  64 +++----
 .../src/__snapshots__/Component.test.tsx.snap |  64 +++----
 21 files changed, 695 insertions(+), 777 deletions(-)

diff --git a/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap b/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap
index 70dfad89dd..7182b64990 100644
--- a/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap
@@ -51,30 +51,26 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
             >
               <button
                 aria-label="Предыдущий период"
-                class="component component component component component text text text size48 hug size48 cc-icon-button arrow primary component component border_32 component"
+                class="component cc-icon-button arrow primary component component border_32 component"
                 data-test-id="period-slider-btn-previous-day"
                 type="button"
               >
                 <span
-                  class="label"
+                  class="iconWrapper size-32 center"
                 >
-                  <span
-                    class="iconWrapper size-32 center"
-                  >
-                    <svg
-                      class="icon"
-                      fill="currentColor"
-                      focusable="false"
-                      height="24"
-                      role="img"
-                      viewBox="0 0 24 24"
-                      width="24"
-                    >
-                      <path
-                        d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
-                      />
-                    </svg>
-                  </span>
+                  <svg
+                    class="icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="24"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width="24"
+                  >
+                    <path
+                      d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
+                    />
+                  </svg>
                 </span>
               </button>
               <span
@@ -84,30 +80,26 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
               </span>
               <button
                 aria-label="Следующий период"
-                class="component component component component component text text text size48 hug size48 cc-icon-button arrow primary component component border_32 component"
+                class="component cc-icon-button arrow primary component component border_32 component"
                 data-test-id="period-slider-btn-next-day"
                 type="button"
               >
                 <span
-                  class="label"
+                  class="iconWrapper size-32 center"
                 >
-                  <span
-                    class="iconWrapper size-32 center"
-                  >
-                    <svg
-                      class="icon"
-                      fill="currentColor"
-                      focusable="false"
-                      height="24"
-                      role="img"
-                      viewBox="0 0 24 24"
-                      width="24"
-                    >
-                      <path
-                        d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
-                      />
-                    </svg>
-                  </span>
+                  <svg
+                    class="icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="24"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width="24"
+                  >
+                    <path
+                      d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
@@ -969,30 +961,26 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
             >
               <button
                 aria-label="Предыдущий период"
-                class="component component component component component text text text size48 hug size48 cc-icon-button arrow primary component component border_32 component"
+                class="component cc-icon-button arrow primary component component border_32 component"
                 data-test-id="period-slider-btn-previous-day"
                 type="button"
               >
                 <span
-                  class="label"
+                  class="iconWrapper size-32 center"
                 >
-                  <span
-                    class="iconWrapper size-32 center"
-                  >
-                    <svg
-                      class="icon"
-                      fill="currentColor"
-                      focusable="false"
-                      height="24"
-                      role="img"
-                      viewBox="0 0 24 24"
-                      width="24"
-                    >
-                      <path
-                        d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
-                      />
-                    </svg>
-                  </span>
+                  <svg
+                    class="icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="24"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width="24"
+                  >
+                    <path
+                      d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
+                    />
+                  </svg>
                 </span>
               </button>
               <span
@@ -1002,30 +990,26 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
               </span>
               <button
                 aria-label="Следующий период"
-                class="component component component component component text text text size48 hug size48 cc-icon-button arrow primary component component border_32 component"
+                class="component cc-icon-button arrow primary component component border_32 component"
                 data-test-id="period-slider-btn-next-day"
                 type="button"
               >
                 <span
-                  class="label"
+                  class="iconWrapper size-32 center"
                 >
-                  <span
-                    class="iconWrapper size-32 center"
-                  >
-                    <svg
-                      class="icon"
-                      fill="currentColor"
-                      focusable="false"
-                      height="24"
-                      role="img"
-                      viewBox="0 0 24 24"
-                      width="24"
-                    >
-                      <path
-                        d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
-                      />
-                    </svg>
-                  </span>
+                  <svg
+                    class="icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="24"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width="24"
+                  >
+                    <path
+                      d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
diff --git a/packages/calendar/src/__snapshots__/Component.test.tsx.snap b/packages/calendar/src/__snapshots__/Component.test.tsx.snap
index 0a25776e18..0750204a59 100644
--- a/packages/calendar/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/calendar/src/__snapshots__/Component.test.tsx.snap
@@ -3386,30 +3386,26 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
       >
         <button
           aria-label="Предыдущий период"
-          class="component component component component component text text text size48 hug size48 cc-icon-button arrow primary component component border_32 component"
+          class="component cc-icon-button arrow primary component component border_32 component"
           data-test-id="period-slider-btn-previous-day"
           type="button"
         >
           <span
-            class="label"
+            class="iconWrapper size-32 center"
           >
-            <span
-              class="iconWrapper size-32 center"
-            >
-              <svg
-                class="icon"
-                fill="currentColor"
-                focusable="false"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
-                />
-              </svg>
-            </span>
+            <svg
+              class="icon"
+              fill="currentColor"
+              focusable="false"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+            >
+              <path
+                d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
+              />
+            </svg>
           </span>
         </button>
         <span
@@ -3419,30 +3415,26 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
         </span>
         <button
           aria-label="Следующий период"
-          class="component component component component component text text text size48 hug size48 cc-icon-button arrow primary component component border_32 component"
+          class="component cc-icon-button arrow primary component component border_32 component"
           data-test-id="period-slider-btn-next-day"
           type="button"
         >
           <span
-            class="label"
+            class="iconWrapper size-32 center"
           >
-            <span
-              class="iconWrapper size-32 center"
-            >
-              <svg
-                class="icon"
-                fill="currentColor"
-                focusable="false"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-              >
-                <path
-                  d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
-                />
-              </svg>
-            </span>
+            <svg
+              class="icon"
+              fill="currentColor"
+              focusable="false"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+            >
+              <path
+                d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
+              />
+            </svg>
           </span>
         </button>
       </div>
diff --git a/packages/calendar/src/components/period-slider/__snapshots__/Component.test.tsx.snap b/packages/calendar/src/components/period-slider/__snapshots__/Component.test.tsx.snap
index b28330d84e..eab5657e72 100644
--- a/packages/calendar/src/components/period-slider/__snapshots__/Component.test.tsx.snap
+++ b/packages/calendar/src/components/period-slider/__snapshots__/Component.test.tsx.snap
@@ -9,31 +9,27 @@ exports[`PeriodSlider empty PeriodSlider empty PeriodSlider default title snapsh
   >
     <button
       aria-label="Предыдущий период"
-      class="component component component component component text text text size48 hug size48 cc-icon-button arrow primary component component border_32 component"
+      class="component cc-icon-button arrow primary component component border_32 component"
       data-test-id="period-slider-btn-previous-day"
       disabled=""
       type="button"
     >
       <span
-        class="label"
+        class="iconWrapper size-32 center"
       >
-        <span
-          class="iconWrapper size-32 center"
+        <svg
+          class="icon"
+          fill="currentColor"
+          focusable="false"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
         >
-          <svg
-            class="icon"
-            fill="currentColor"
-            focusable="false"
-            height="24"
-            role="img"
-            viewBox="0 0 24 24"
-            width="24"
-          >
-            <path
-              d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
+          />
+        </svg>
       </span>
     </button>
     <span
@@ -43,31 +39,27 @@ exports[`PeriodSlider empty PeriodSlider empty PeriodSlider default title snapsh
     </span>
     <button
       aria-label="Следующий период"
-      class="component component component component component text text text size48 hug size48 cc-icon-button arrow primary component component border_32 component"
+      class="component cc-icon-button arrow primary component component border_32 component"
       data-test-id="period-slider-btn-next-day"
       disabled=""
       type="button"
     >
       <span
-        class="label"
+        class="iconWrapper size-32 center"
       >
-        <span
-          class="iconWrapper size-32 center"
+        <svg
+          class="icon"
+          fill="currentColor"
+          focusable="false"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
         >
-          <svg
-            class="icon"
-            fill="currentColor"
-            focusable="false"
-            height="24"
-            role="img"
-            viewBox="0 0 24 24"
-            width="24"
-          >
-            <path
-              d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
+          />
+        </svg>
       </span>
     </button>
   </div>
@@ -83,31 +75,27 @@ exports[`PeriodSlider empty PeriodSlider empty PeriodSlider specific title snaps
   >
     <button
       aria-label="Предыдущий период"
-      class="component component component component component text text text size48 hug size48 cc-icon-button arrow primary component component border_32 component"
+      class="component cc-icon-button arrow primary component component border_32 component"
       data-test-id="period-slider-btn-previous-day"
       disabled=""
       type="button"
     >
       <span
-        class="label"
+        class="iconWrapper size-32 center"
       >
-        <span
-          class="iconWrapper size-32 center"
+        <svg
+          class="icon"
+          fill="currentColor"
+          focusable="false"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
         >
-          <svg
-            class="icon"
-            fill="currentColor"
-            focusable="false"
-            height="24"
-            role="img"
-            viewBox="0 0 24 24"
-            width="24"
-          >
-            <path
-              d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
+          />
+        </svg>
       </span>
     </button>
     <span
@@ -117,31 +105,27 @@ exports[`PeriodSlider empty PeriodSlider empty PeriodSlider specific title snaps
     </span>
     <button
       aria-label="Следующий период"
-      class="component component component component component text text text size48 hug size48 cc-icon-button arrow primary component component border_32 component"
+      class="component cc-icon-button arrow primary component component border_32 component"
       data-test-id="period-slider-btn-next-day"
       disabled=""
       type="button"
     >
       <span
-        class="label"
+        class="iconWrapper size-32 center"
       >
-        <span
-          class="iconWrapper size-32 center"
+        <svg
+          class="icon"
+          fill="currentColor"
+          focusable="false"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
         >
-          <svg
-            class="icon"
-            fill="currentColor"
-            focusable="false"
-            height="24"
-            role="img"
-            viewBox="0 0 24 24"
-            width="24"
-          >
-            <path
-              d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M10 12l5.5 5.5L14 19l-7-7 7-7 1.5 1.5L10 12z"
+          />
+        </svg>
       </span>
     </button>
   </div>
diff --git a/packages/file-upload-item-v1/src/__snapshots__/Component.test.tsx.snap b/packages/file-upload-item-v1/src/__snapshots__/Component.test.tsx.snap
index 3b6367ee51..db5d6229a0 100644
--- a/packages/file-upload-item-v1/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/file-upload-item-v1/src/__snapshots__/Component.test.tsx.snap
@@ -51,57 +51,49 @@ exports[`FileUploadItemV1 Snapshots tests should match snapshot 1`] = `
         <a
           aria-disabled="false"
           aria-label="скачать"
-          class="component component component component component text text text size48 hug size48 cc-icon-button download primary component component border_24 component"
+          class="component cc-icon-button download primary component component border_24 component"
           download="новое_название_файла"
           href="/link"
         >
           <span
-            class="label"
+            class="iconWrapper size-24 center"
           >
-            <span
-              class="iconWrapper size-24 center"
+            <svg
+              class="icon"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              <svg
-                class="icon"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M10.963 6.623L8.667 8.87V2H7.333v6.87L5.037 6.622l-.932.954L8 11.387l3.895-3.81-.932-.954zM13.333 14v-1.333H2.667V14h10.666z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M10.963 6.623L8.667 8.87V2H7.333v6.87L5.037 6.622l-.932.954L8 11.387l3.895-3.81-.932-.954zM13.333 14v-1.333H2.667V14h10.666z"
+              />
+            </svg>
           </span>
         </a>
         <button
           aria-label="удалить"
-          class="component component component component component text text text size48 hug size48 cc-icon-button delete primary component component border_24 component"
+          class="component cc-icon-button delete primary component component border_24 component"
           type="button"
         >
           <span
-            class="label"
+            class="iconWrapper size-24 center"
           >
-            <span
-              class="iconWrapper size-24 center"
+            <svg
+              class="icon"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              <svg
-                class="icon"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M7.057 8L4 11l1 1 3-3.057L11 12l1-1-3.057-3L12 5l-1-1-3 3.057L5 4 4 5l3.057 3z"
-                />
-              </svg>
-            </span>
+              <path
+                d="M7.057 8L4 11l1 1 3-3.057L11 12l1-1-3.057-3L12 5l-1-1-3 3.057L5 4 4 5l3.057 3z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -154,57 +146,49 @@ exports[`FileUploadItemV1 Snapshots tests should match snapshot 1`] = `
       <a
         aria-disabled="false"
         aria-label="скачать"
-        class="component component component component component text text text size48 hug size48 cc-icon-button download primary component component border_24 component"
+        class="component cc-icon-button download primary component component border_24 component"
         download="новое_название_файла"
         href="/link"
       >
         <span
-          class="label"
+          class="iconWrapper size-24 center"
         >
-          <span
-            class="iconWrapper size-24 center"
+          <svg
+            class="icon"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            <svg
-              class="icon"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M10.963 6.623L8.667 8.87V2H7.333v6.87L5.037 6.622l-.932.954L8 11.387l3.895-3.81-.932-.954zM13.333 14v-1.333H2.667V14h10.666z"
-              />
-            </svg>
-          </span>
+            <path
+              d="M10.963 6.623L8.667 8.87V2H7.333v6.87L5.037 6.622l-.932.954L8 11.387l3.895-3.81-.932-.954zM13.333 14v-1.333H2.667V14h10.666z"
+            />
+          </svg>
         </span>
       </a>
       <button
         aria-label="удалить"
-        class="component component component component component text text text size48 hug size48 cc-icon-button delete primary component component border_24 component"
+        class="component cc-icon-button delete primary component component border_24 component"
         type="button"
       >
         <span
-          class="label"
+          class="iconWrapper size-24 center"
         >
-          <span
-            class="iconWrapper size-24 center"
+          <svg
+            class="icon"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
           >
-            <svg
-              class="icon"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              role="img"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M7.057 8L4 11l1 1 3-3.057L11 12l1-1-3.057-3L12 5l-1-1-3 3.057L5 4 4 5l3.057 3z"
-              />
-            </svg>
-          </span>
+            <path
+              d="M7.057 8L4 11l1 1 3-3.057L11 12l1-1-3.057-3L12 5l-1-1-3 3.057L5 4 4 5l3.057 3z"
+            />
+          </svg>
         </span>
       </button>
     </div>
diff --git a/packages/icon-button/src/__image_snapshots__/icon-button-screenshots-disabled-view-2-colors-0-snap.png b/packages/icon-button/src/__image_snapshots__/icon-button-screenshots-disabled-view-2-colors-0-snap.png
index 55c90c17e8..33ff2c237a 100644
--- a/packages/icon-button/src/__image_snapshots__/icon-button-screenshots-disabled-view-2-colors-0-snap.png
+++ b/packages/icon-button/src/__image_snapshots__/icon-button-screenshots-disabled-view-2-colors-0-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8e53491bfb3fc6f57e699eb2c415dbcb9f83afb4df39ca93933ba24df1fe97ac
-size 746
+oid sha256:62097e0415d97675a2f7450354d02030659f8f27758cf13087b9c659efd39b6c
+size 666
diff --git a/packages/icon-button/src/__image_snapshots__/icon-button-screenshots-disabled-view-2-colors-1-snap.png b/packages/icon-button/src/__image_snapshots__/icon-button-screenshots-disabled-view-2-colors-1-snap.png
index b6e213019c..47efd91ae2 100644
--- a/packages/icon-button/src/__image_snapshots__/icon-button-screenshots-disabled-view-2-colors-1-snap.png
+++ b/packages/icon-button/src/__image_snapshots__/icon-button-screenshots-disabled-view-2-colors-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:67d0e1565e1e3c8b6453dfbe05895aee84aae9c28dd30fbc55eab831ab0a6d0b
-size 623
+oid sha256:0fc8bbcebdb89d7e81c629a0d947c3fe8892af7bdc60225f8d0fd5a200ceae17
+size 711
diff --git a/packages/icon-button/src/__snapshots__/Component.test.tsx.snap b/packages/icon-button/src/__snapshots__/Component.test.tsx.snap
index dd4f1958b5..382a21a065 100644
--- a/packages/icon-button/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/icon-button/src/__snapshots__/Component.test.tsx.snap
@@ -7,43 +7,9 @@ exports[`IconButton Href tests should set \`href\` attribute and be link 1`] = `
     <div>
       <a
         aria-disabled="false"
-        class="component component component component component text text text size48 hug size48 cc-icon-button primary component component border_48 component"
+        class="component cc-icon-button primary component component border_48 component"
         data-test-id="test-id"
         href="http://example.com"
-      >
-        <span
-          class="label"
-        >
-          <span
-            class="iconWrapper size-48 center"
-          >
-            <svg
-              class="icon"
-              fill="currentColor"
-              focusable="false"
-              height="24"
-              role="img"
-              viewBox="0 0 24 24"
-              width="24"
-            >
-              <path
-                d="M11.063 3.505c.324-.866 1.55-.866 1.873 0l1.794 4.798a1 1 0 00.893.649l5.118.223c.924.04 1.302 1.206.578 1.782l-4.008 3.189a1 1 0 00-.341 1.05l1.369 4.935c.247.892-.745 1.612-1.516 1.102l-4.271-2.827a1 1 0 00-1.104 0l-4.272 2.827c-.77.51-1.762-.21-1.515-1.102l1.368-4.936a1 1 0 00-.34-1.05l-4.01-3.188c-.723-.576-.344-1.741.58-1.782l5.117-.223a1 1 0 00.893-.65l1.794-4.797z"
-              />
-            </svg>
-          </span>
-        </span>
-      </a>
-    </div>
-  </body>,
-  "container": <div>
-    <a
-      aria-disabled="false"
-      class="component component component component component text text text size48 hug size48 cc-icon-button primary component component border_48 component"
-      data-test-id="test-id"
-      href="http://example.com"
-    >
-      <span
-        class="label"
       >
         <span
           class="iconWrapper size-48 center"
@@ -62,6 +28,32 @@ exports[`IconButton Href tests should set \`href\` attribute and be link 1`] = `
             />
           </svg>
         </span>
+      </a>
+    </div>
+  </body>,
+  "container": <div>
+    <a
+      aria-disabled="false"
+      class="component cc-icon-button primary component component border_48 component"
+      data-test-id="test-id"
+      href="http://example.com"
+    >
+      <span
+        class="iconWrapper size-48 center"
+      >
+        <svg
+          class="icon"
+          fill="currentColor"
+          focusable="false"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M11.063 3.505c.324-.866 1.55-.866 1.873 0l1.794 4.798a1 1 0 00.893.649l5.118.223c.924.04 1.302 1.206.578 1.782l-4.008 3.189a1 1 0 00-.341 1.05l1.369 4.935c.247.892-.745 1.612-1.516 1.102l-4.271-2.827a1 1 0 00-1.104 0l-4.272 2.827c-.77.51-1.762-.21-1.515-1.102l1.368-4.936a1 1 0 00-.34-1.05l-4.01-3.188c-.723-.576-.344-1.741.58-1.782l5.117-.223a1 1 0 00.893-.65l1.794-4.797z"
+          />
+        </svg>
       </span>
     </a>
   </div>,
@@ -125,40 +117,8 @@ exports[`IconButton Snapshots tests should match snapshot 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component component component component component text text text size48 hug size48 cc-icon-button primary component component border_48 component"
+        class="component cc-icon-button primary component component border_48 component"
         type="button"
-      >
-        <span
-          class="label"
-        >
-          <span
-            class="iconWrapper size-48 center"
-          >
-            <svg
-              class="icon"
-              fill="currentColor"
-              focusable="false"
-              height="24"
-              role="img"
-              viewBox="0 0 24 24"
-              width="24"
-            >
-              <path
-                d="M11.063 3.505c.324-.866 1.55-.866 1.873 0l1.794 4.798a1 1 0 00.893.649l5.118.223c.924.04 1.302 1.206.578 1.782l-4.008 3.189a1 1 0 00-.341 1.05l1.369 4.935c.247.892-.745 1.612-1.516 1.102l-4.271-2.827a1 1 0 00-1.104 0l-4.272 2.827c-.77.51-1.762-.21-1.515-1.102l1.368-4.936a1 1 0 00-.34-1.05l-4.01-3.188c-.723-.576-.344-1.741.58-1.782l5.117-.223a1 1 0 00.893-.65l1.794-4.797z"
-              />
-            </svg>
-          </span>
-        </span>
-      </button>
-    </div>
-  </body>,
-  "container": <div>
-    <button
-      class="component component component component component text text text size48 hug size48 cc-icon-button primary component component border_48 component"
-      type="button"
-    >
-      <span
-        class="label"
       >
         <span
           class="iconWrapper size-48 center"
@@ -177,6 +137,30 @@ exports[`IconButton Snapshots tests should match snapshot 1`] = `
             />
           </svg>
         </span>
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      class="component cc-icon-button primary component component border_48 component"
+      type="button"
+    >
+      <span
+        class="iconWrapper size-48 center"
+      >
+        <svg
+          class="icon"
+          fill="currentColor"
+          focusable="false"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M11.063 3.505c.324-.866 1.55-.866 1.873 0l1.794 4.798a1 1 0 00.893.649l5.118.223c.924.04 1.302 1.206.578 1.782l-4.008 3.189a1 1 0 00-.341 1.05l1.369 4.935c.247.892-.745 1.612-1.516 1.102l-4.271-2.827a1 1 0 00-1.104 0l-4.272 2.827c-.77.51-1.762-.21-1.515-1.102l1.368-4.936a1 1 0 00-.34-1.05l-4.01-3.188c-.723-.576-.344-1.741.58-1.782l5.117-.223a1 1 0 00.893-.65l1.794-4.797z"
+          />
+        </svg>
       </span>
     </button>
   </div>,
diff --git a/packages/icon-button/src/components/base-icon-button/Component.tsx b/packages/icon-button/src/components/base-icon-button/Component.tsx
index f1e7ae525a..f31b51d3cc 100644
--- a/packages/icon-button/src/components/base-icon-button/Component.tsx
+++ b/packages/icon-button/src/components/base-icon-button/Component.tsx
@@ -1,8 +1,8 @@
 import React, { forwardRef, type ReactElement } from 'react';
 import cn from 'classnames';
 
-import { ButtonDesktop } from '@alfalab/core-components-button/desktop';
-import { ButtonMobile } from '@alfalab/core-components-button/mobile';
+import { BaseButtonCandidate } from '@alfalab/core-components-button/components/base-button-candidate';
+import { useLoading } from '@alfalab/core-components-button/shared';
 
 import { type IconButtonProps } from '../../types/icon-button-props';
 
@@ -15,12 +15,12 @@ const colorStyles = {
     inverted: invertedColors,
 };
 
-type BaseIconButtonProps = {
-    client: 'desktop' | 'mobile';
-    clientStyles: Record<string, string>;
-};
-
-export const BaseIconButton = forwardRef<HTMLButtonElement, IconButtonProps & BaseIconButtonProps>(
+export const BaseIconButton = forwardRef<
+    HTMLButtonElement,
+    IconButtonProps & {
+        clientStyles: Record<string, string>;
+    }
+>(
     (
         {
             className,
@@ -30,19 +30,20 @@ export const BaseIconButton = forwardRef<HTMLButtonElement, IconButtonProps & Ba
             colors = 'default',
             alignIcon = 'center',
             transparentBg = false,
-            client,
             clientStyles,
+            loading: loadingFromProps,
             ...restProps
         },
         ref,
     ) => {
-        const Component = client === 'desktop' ? ButtonDesktop : ButtonMobile;
+        const loading = useLoading(loadingFromProps);
 
         return (
-            <Component
+            <BaseButtonCandidate
                 {...restProps}
                 ref={ref}
-                view='text'
+                disabledClassName={colorStyles[colors].disabled}
+                loading={loading}
                 className={cn(
                     'cc-icon-button',
                     className,
@@ -51,11 +52,10 @@ export const BaseIconButton = forwardRef<HTMLButtonElement, IconButtonProps & Ba
                     clientStyles.component,
                     clientStyles[`border_${size}`],
                     {
-                        [colorStyles[colors].loader]: restProps.loading,
+                        [colorStyles[colors].loader]: loading,
                         [colorStyles[colors].transparentBg]: transparentBg,
                     },
                 )}
-                size={48}
             >
                 <span className={cn(styles.iconWrapper, styles[`size-${size}`], styles[alignIcon])}>
                     {React.isValidElement(Icon) ? (
@@ -69,7 +69,7 @@ export const BaseIconButton = forwardRef<HTMLButtonElement, IconButtonProps & Ba
                         <Icon className={styles.icon} />
                     )}
                 </span>
-            </Component>
+            </BaseButtonCandidate>
         );
     },
 );
diff --git a/packages/icon-button/src/components/base-icon-button/default.module.css b/packages/icon-button/src/components/base-icon-button/default.module.css
index 231494d1f5..3620310b2c 100644
--- a/packages/icon-button/src/components/base-icon-button/default.module.css
+++ b/packages/icon-button/src/components/base-icon-button/default.module.css
@@ -36,60 +36,70 @@
     &.primary {
         color: var(--icon-button-primary-base-color);
 
-        @mixin hover {
-            color: var(--icon-button-primary-hover-color);
-        }
+        @mixin not-disabled {
+            @mixin hover {
+                color: var(--icon-button-primary-hover-color);
+            }
 
-        &:active {
-            color: var(--icon-button-primary-active-color);
+            &:active {
+                color: var(--icon-button-primary-active-color);
+            }
         }
     }
 
     &.secondary {
         color: var(--icon-button-secondary-base-color);
 
-        @mixin hover {
-            color: var(--icon-button-secondary-hover-color);
-        }
+        @mixin not-disabled {
+            @mixin hover {
+                color: var(--icon-button-secondary-hover-color);
+            }
 
-        &:active {
-            color: var(--icon-button-secondary-active-color);
+            &:active {
+                color: var(--icon-button-secondary-active-color);
+            }
         }
     }
 
     &.transparent {
         color: var(--icon-button-transparent-base-color);
 
-        @mixin hover {
-            color: var(--icon-button-transparent-hover-color);
-        }
+        @mixin not-disabled {
+            @mixin hover {
+                color: var(--icon-button-transparent-hover-color);
+            }
 
-        &:active {
-            color: var(--icon-button-transparent-active-color);
+            &:active {
+                color: var(--icon-button-transparent-active-color);
+            }
         }
     }
 
     &.negative {
         color: var(--icon-button-negative-base-color);
 
-        @mixin hover {
-            color: var(--icon-button-negative-hover-color);
-        }
+        @mixin not-disabled {
+            @mixin hover {
+                color: var(--icon-button-negative-hover-color);
+            }
 
-        &:active {
-            color: var(--icon-button-negative-active-color);
+            &:active {
+                color: var(--icon-button-negative-active-color);
+            }
         }
     }
 
     &.tertiary {
         color: var(--icon-button-tertiary-base-color);
 
-        @mixin hover {
-            color: var(--icon-button-tertiary-hover-color);
-        }
+        @mixin not-disabled {
+            @mixin hover {
+                color: var(--icon-button-tertiary-hover-color);
+            }
 
-        &:active {
-            color: var(--icon-button-tertiary-active-color);
+            &:active {
+                color: var(--icon-button-tertiary-active-color);
+            }
         }
     }
 
@@ -97,87 +107,105 @@
         &.primary {
             color: var(--color-light-text-primary);
 
-            @mixin hover {
-                background: var(--color-light-transparent-default-hover);
-            }
+            @mixin not-disabled {
+                @mixin hover {
+                    background: var(--color-light-transparent-default-hover);
+                }
 
-            &:active {
-                background: var(--color-light-transparent-default-press);
+                &:active {
+                    background: var(--color-light-transparent-default-press);
+                }
             }
         }
 
         &.secondary {
             color: var(--color-light-text-secondary);
 
-            @mixin hover {
-                background: var(--color-light-transparent-default-hover);
-            }
+            @mixin not-disabled {
+                @mixin hover {
+                    background: var(--color-light-transparent-default-hover);
+                }
 
-            &:active {
-                background: var(--color-light-transparent-default-press);
+                &:active {
+                    background: var(--color-light-transparent-default-press);
+                }
             }
         }
 
         &.negative {
             color: var(--color-light-text-negative);
 
-            @mixin hover {
-                background: var(--color-light-transparent-default-hover);
-            }
+            @mixin not-disabled {
+                @mixin hover {
+                    background: var(--color-light-transparent-default-hover);
+                }
 
-            &:active {
-                background: var(--color-light-transparent-default-press);
+                &:active {
+                    background: var(--color-light-transparent-default-press);
+                }
             }
         }
 
         &.tertiary {
             color: var(--color-light-text-tertiary);
 
-            @mixin hover {
-                background: var(--color-light-transparent-default-hover);
-            }
+            @mixin not-disabled {
+                @mixin hover {
+                    background: var(--color-light-transparent-default-hover);
+                }
 
-            &:active {
-                background: var(--color-light-transparent-default-press);
+                &:active {
+                    background: var(--color-light-transparent-default-press);
+                }
             }
         }
     }
 
-    &.component:disabled {
-        &.primary {
-            color: var(--icon-button-primary-disabled-color);
+    &.component {
+        @mixin disabled {
+            &.primary {
+                color: var(--icon-button-primary-disabled-color);
 
-            &.loader {
-                color: var(--icon-button-primary-base-color);
+                &.loader {
+                    color: var(--icon-button-primary-base-color);
+                }
             }
-        }
 
-        &.secondary {
-            color: var(--icon-button-secondary-disabled-color);
+            &.secondary {
+                color: var(--icon-button-secondary-disabled-color);
 
-            &.loader {
-                color: var(--icon-button-secondary-base-color);
+                &.loader {
+                    color: var(--icon-button-secondary-base-color);
+                }
             }
-        }
 
-        &.negative {
-            color: var(--icon-button-negative-disabled-color);
+            &.transparent {
+                color: var(--icon-button-transparent-disabled-color);
 
-            &.loader {
-                color: var(--icon-button-negative-base-color);
+                &.loader {
+                    color: var(--icon-button-transparent-base-color);
+                }
             }
-        }
 
-        &.tertiary {
-            color: var(--icon-button-tertiary-disabled-color);
+            &.negative {
+                color: var(--icon-button-negative-disabled-color);
 
-            &.loader {
-                color: var(--icon-button-tertiary-base-color);
+                &.loader {
+                    color: var(--icon-button-negative-base-color);
+                }
             }
-        }
 
-        &.transparentBg {
-            background: transparent;
+            &.tertiary {
+                color: var(--icon-button-tertiary-disabled-color);
+
+                &.loader {
+                    color: var(--icon-button-tertiary-base-color);
+                }
+            }
+
+            &.transparentBg {
+                background: transparent;
+            }
         }
     }
 }
diff --git a/packages/icon-button/src/components/base-icon-button/inverted.module.css b/packages/icon-button/src/components/base-icon-button/inverted.module.css
index 0b6f20d65e..81727ecd37 100644
--- a/packages/icon-button/src/components/base-icon-button/inverted.module.css
+++ b/packages/icon-button/src/components/base-icon-button/inverted.module.css
@@ -66,60 +66,70 @@
     &.primary {
         color: var(--icon-button-inverted-primary-base-color);
 
-        @mixin hover {
-            color: var(--icon-button-inverted-primary-hover-color);
-        }
+        @mixin not-disabled {
+            @mixin hover {
+                color: var(--icon-button-inverted-primary-hover-color);
+            }
 
-        &:active {
-            color: var(--icon-button-inverted-primary-active-color);
+            &:active {
+                color: var(--icon-button-inverted-primary-active-color);
+            }
         }
     }
 
     &.secondary {
         color: var(--icon-button-inverted-secondary-base-color);
 
-        @mixin hover {
-            color: var(--icon-button-inverted-secondary-hover-color);
-        }
+        @mixin not-disabled {
+            @mixin hover {
+                color: var(--icon-button-inverted-secondary-hover-color);
+            }
 
-        &:active {
-            color: var(--icon-button-inverted-secondary-active-color);
+            &:active {
+                color: var(--icon-button-inverted-secondary-active-color);
+            }
         }
     }
 
     &.transparent {
         color: var(--icon-button-inverted-transparent-base-color);
 
-        @mixin hover {
-            color: var(--icon-button-inverted-transparent-hover-color);
-        }
+        @mixin not-disabled {
+            @mixin hover {
+                color: var(--icon-button-inverted-transparent-hover-color);
+            }
 
-        &:active {
-            color: var(--icon-button-inverted-transparent-active-color);
+            &:active {
+                color: var(--icon-button-inverted-transparent-active-color);
+            }
         }
     }
 
     &.negative {
         color: var(--icon-button-inverted-negative-base-color);
 
-        @mixin hover {
-            color: var(--icon-button-inverted-negative-hover-color);
-        }
+        @mixin not-disabled {
+            @mixin hover {
+                color: var(--icon-button-inverted-negative-hover-color);
+            }
 
-        &:active {
-            color: var(--icon-button-inverted-negative-active-color);
+            &:active {
+                color: var(--icon-button-inverted-negative-active-color);
+            }
         }
     }
 
     &.tertiary {
         color: var(--icon-button-inverted-tertiary-base-color);
 
-        @mixin hover {
-            color: var(--icon-button-inverted-tertiary-hover-color);
-        }
+        @mixin not-disabled {
+            @mixin hover {
+                color: var(--icon-button-inverted-tertiary-hover-color);
+            }
 
-        &:active {
-            color: var(--icon-button-inverted-tertiary-active-color);
+            &:active {
+                color: var(--icon-button-inverted-tertiary-active-color);
+            }
         }
     }
 
@@ -127,87 +137,105 @@
         &.primary {
             color: var(--color-light-text-primary-inverted);
 
-            @mixin hover {
-                background: var(--color-light-transparent-default-inverted-hover);
-            }
+            @mixin not-disabled {
+                @mixin hover {
+                    background: var(--color-light-transparent-default-inverted-hover);
+                }
 
-            &:active {
-                background: var(--color-light-transparent-default-inverted-press);
+                &:active {
+                    background: var(--color-light-transparent-default-inverted-press);
+                }
             }
         }
 
         &.secondary {
             color: var(--color-light-text-secondary-inverted);
 
-            @mixin hover {
-                background: var(--color-light-transparent-default-inverted-hover);
-            }
+            @mixin not-disabled {
+                @mixin hover {
+                    background: var(--color-light-transparent-default-inverted-hover);
+                }
 
-            &:active {
-                background: var(--color-light-transparent-default-inverted-press);
+                &:active {
+                    background: var(--color-light-transparent-default-inverted-press);
+                }
             }
         }
 
         &.negative {
             color: var(--color-light-text-negative-inverted);
 
-            @mixin hover {
-                background: var(--color-light-transparent-default-inverted-hover);
-            }
+            @mixin not-disabled {
+                @mixin hover {
+                    background: var(--color-light-transparent-default-inverted-hover);
+                }
 
-            &:active {
-                background: var(--color-light-transparent-default-inverted-press);
+                &:active {
+                    background: var(--color-light-transparent-default-inverted-press);
+                }
             }
         }
 
         &.tertiary {
             color: var(--color-light-text-tertiary-inverted);
 
-            @mixin hover {
-                background: var(--color-light-transparent-default-inverted-hover);
-            }
+            @mixin not-disabled {
+                @mixin hover {
+                    background: var(--color-light-transparent-default-inverted-hover);
+                }
 
-            &:active {
-                background: var(--color-light-transparent-default-inverted-press);
+                &:active {
+                    background: var(--color-light-transparent-default-inverted-press);
+                }
             }
         }
     }
 
-    &.component:disabled {
-        &.primary {
-            color: var(--icon-button-inverted-primary-disabled-color);
+    &.component {
+        @mixin disabled {
+            &.primary {
+                color: var(--icon-button-inverted-primary-disabled-color);
 
-            &.loader {
-                color: var(--icon-button-inverted-primary-base-color);
+                &.loader {
+                    color: var(--icon-button-inverted-primary-base-color);
+                }
             }
-        }
 
-        &.secondary {
-            color: var(--icon-button-inverted-secondary-disabled-color);
+            &.secondary {
+                color: var(--icon-button-inverted-secondary-disabled-color);
 
-            &.loader {
-                color: var(--icon-button-inverted-secondary-base-color);
+                &.loader {
+                    color: var(--icon-button-inverted-secondary-base-color);
+                }
             }
-        }
 
-        &.negative {
-            color: var(--icon-button-inverted-negative-disabled-color);
+            &.transparent {
+                color: var(--icon-button-inverted-transparent-disabled-color);
 
-            &.loader {
-                color: var(--icon-button-inverted-negative-base-color);
+                &.loader {
+                    color: var(--icon-button-inverted-transparent-base-color);
+                }
             }
-        }
 
-        &.tertiary {
-            color: var(--icon-button-inverted-tertiary-disabled-color);
+            &.negative {
+                color: var(--icon-button-inverted-negative-disabled-color);
 
-            &.loader {
-                color: var(--icon-button-inverted-tertiary-base-color);
+                &.loader {
+                    color: var(--icon-button-inverted-negative-base-color);
+                }
             }
-        }
 
-        &.transparentBg {
-            background: transparent;
+            &.tertiary {
+                color: var(--icon-button-inverted-tertiary-disabled-color);
+
+                &.loader {
+                    color: var(--icon-button-inverted-tertiary-base-color);
+                }
+            }
+
+            &.transparentBg {
+                background: transparent;
+            }
         }
     }
 }
diff --git a/packages/icon-button/src/desktop/Component.desktop.tsx b/packages/icon-button/src/desktop/Component.desktop.tsx
index 0a3a29e900..a30cef0621 100644
--- a/packages/icon-button/src/desktop/Component.desktop.tsx
+++ b/packages/icon-button/src/desktop/Component.desktop.tsx
@@ -8,9 +8,7 @@ import clientStyles from './desktop.module.css';
 export type IconButtonDesktopProps = IconButtonProps;
 
 export const IconButtonDesktop = forwardRef<HTMLButtonElement, IconButtonDesktopProps>(
-    (props, ref) => (
-        <BaseIconButton {...props} ref={ref} client='desktop' clientStyles={clientStyles} />
-    ),
+    (props, ref) => <BaseIconButton {...props} ref={ref} clientStyles={clientStyles} />,
 );
 
 IconButtonDesktop.displayName = 'IconButtonDesktop';
diff --git a/packages/icon-button/src/mobile/Component.mobile.tsx b/packages/icon-button/src/mobile/Component.mobile.tsx
index eee2df61c5..9dcb03211c 100644
--- a/packages/icon-button/src/mobile/Component.mobile.tsx
+++ b/packages/icon-button/src/mobile/Component.mobile.tsx
@@ -8,9 +8,7 @@ import clientStyles from './mobile.module.css';
 export type IconButtonMobileProps = IconButtonProps;
 
 export const IconButtonMobile = forwardRef<HTMLButtonElement, IconButtonMobileProps>(
-    (props, ref) => (
-        <BaseIconButton {...props} ref={ref} client='mobile' clientStyles={clientStyles} />
-    ),
+    (props, ref) => <BaseIconButton {...props} ref={ref} clientStyles={clientStyles} />,
 );
 
 IconButtonMobile.displayName = 'IconButtonMobile';
diff --git a/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap b/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap
index 3fd4eabf86..0cde288a48 100644
--- a/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap
@@ -145,29 +145,25 @@ exports[`InputAutocompleteMobile Snapshots tests should match snapshot in open s
                             >
                               <button
                                 aria-label="закрыть"
-                                class="component component component component component text text text size48 hug size48 cc-icon-button button button mobile primary component component border_32 component"
+                                class="component cc-icon-button button button mobile primary component component border_32 component"
                                 type="button"
                               >
                                 <span
-                                  class="label"
+                                  class="iconWrapper size-32 center"
                                 >
-                                  <span
-                                    class="iconWrapper size-32 center"
+                                  <svg
+                                    class="icon"
+                                    fill="currentColor"
+                                    focusable="false"
+                                    height="24"
+                                    role="img"
+                                    viewBox="0 0 24 24"
+                                    width="24"
                                   >
-                                    <svg
-                                      class="icon"
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height="24"
-                                      role="img"
-                                      viewBox="0 0 24 24"
-                                      width="24"
-                                    >
-                                      <path
-                                        d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
-                                      />
-                                    </svg>
-                                  </span>
+                                    <path
+                                      d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
+                                    />
+                                  </svg>
                                 </span>
                               </button>
                             </div>
diff --git a/packages/modal/src/__snapshots__/Component.test.tsx.snap b/packages/modal/src/__snapshots__/Component.test.tsx.snap
index d1b68c45c2..131b9ff059 100644
--- a/packages/modal/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/modal/src/__snapshots__/Component.test.tsx.snap
@@ -74,29 +74,25 @@ exports[`ModalDesktop snapshots tests should match snapshot 1`] = `
               >
                 <button
                   aria-label="закрыть"
-                  class="component component component component component text text text size48 hug size48 cc-icon-button button button primary component component border_48 component"
+                  class="component cc-icon-button button button primary component component border_48 component"
                   type="button"
                 >
                   <span
-                    class="label"
+                    class="iconWrapper size-48 center"
                   >
-                    <span
-                      class="iconWrapper size-48 center"
+                    <svg
+                      class="icon"
+                      fill="currentColor"
+                      focusable="false"
+                      height="24"
+                      role="img"
+                      viewBox="0 0 24 24"
+                      width="24"
                     >
-                      <svg
-                        class="icon"
-                        fill="currentColor"
-                        focusable="false"
-                        height="24"
-                        role="img"
-                        viewBox="0 0 24 24"
-                        width="24"
-                      >
-                        <path
-                          d="M10 12L3 5.5 5.25 3 12 9.5 18.75 3 21 5.5 14 12l7 6.5-2.25 2.5L12 14.5 5.25 21 3 18.5l7-6.5z"
-                        />
-                      </svg>
-                    </span>
+                      <path
+                        d="M10 12L3 5.5 5.25 3 12 9.5 18.75 3 21 5.5 14 12l7 6.5-2.25 2.5L12 14.5 5.25 21 3 18.5l7-6.5z"
+                      />
+                    </svg>
                   </span>
                 </button>
               </div>
@@ -212,29 +208,25 @@ exports[`ModalMobile snapshots tests should match snapshot 1`] = `
               >
                 <button
                   aria-label="закрыть"
-                  class="component component component component component text text text size48 hug size48 cc-icon-button button button mobile primary component component border_32 component"
+                  class="component cc-icon-button button button mobile primary component component border_32 component"
                   type="button"
                 >
                   <span
-                    class="label"
+                    class="iconWrapper size-32 center"
                   >
-                    <span
-                      class="iconWrapper size-32 center"
+                    <svg
+                      class="icon"
+                      fill="currentColor"
+                      focusable="false"
+                      height="24"
+                      role="img"
+                      viewBox="0 0 24 24"
+                      width="24"
                     >
-                      <svg
-                        class="icon"
-                        fill="currentColor"
-                        focusable="false"
-                        height="24"
-                        role="img"
-                        viewBox="0 0 24 24"
-                        width="24"
-                      >
-                        <path
-                          d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
-                        />
-                      </svg>
-                    </span>
+                      <path
+                        d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
+                      />
+                    </svg>
                   </span>
                 </button>
               </div>
diff --git a/packages/navigation-bar-private/src/__snapshots__/Component.test.tsx.snap b/packages/navigation-bar-private/src/__snapshots__/Component.test.tsx.snap
index 0488d5913b..ebe60dab5c 100644
--- a/packages/navigation-bar-private/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/navigation-bar-private/src/__snapshots__/Component.test.tsx.snap
@@ -66,30 +66,26 @@ exports[`Navigation Bar Snapshots tests should match snapshot 1`] = `
             >
               <button
                 aria-label="закрыть"
-                class="component component component component component text text text size48 hug size48 cc-icon-button button button primary component component border_48 component"
+                class="component cc-icon-button button button primary component component border_48 component"
                 data-test-id="navigation-bar-dti-closer"
                 type="button"
               >
                 <span
-                  class="label"
+                  class="iconWrapper size-48 center"
                 >
-                  <span
-                    class="iconWrapper size-48 center"
+                  <svg
+                    class="icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="24"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width="24"
                   >
-                    <svg
-                      class="icon"
-                      fill="currentColor"
-                      focusable="false"
-                      height="24"
-                      role="img"
-                      viewBox="0 0 24 24"
-                      width="24"
-                    >
-                      <path
-                        d="M10 12L3 5.5 5.25 3 12 9.5 18.75 3 21 5.5 14 12l7 6.5-2.25 2.5L12 14.5 5.25 21 3 18.5l7-6.5z"
-                      />
-                    </svg>
-                  </span>
+                    <path
+                      d="M10 12L3 5.5 5.25 3 12 9.5 18.75 3 21 5.5 14 12l7 6.5-2.25 2.5L12 14.5 5.25 21 3 18.5l7-6.5z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
diff --git a/packages/notification-manager/src/__snapshots__/component.test.tsx.snap b/packages/notification-manager/src/__snapshots__/component.test.tsx.snap
index 6481b45f91..829a5b1fc8 100644
--- a/packages/notification-manager/src/__snapshots__/component.test.tsx.snap
+++ b/packages/notification-manager/src/__snapshots__/component.test.tsx.snap
@@ -57,29 +57,25 @@ exports[`NotificationManager Snapshots tests should match snapshot 1`] = `
             >
               <button
                 aria-label="закрыть"
-                class="component component component component component text text text size48 hug size48 cc-icon-button closeButton closeButton primary component component border_48 component"
+                class="component cc-icon-button closeButton closeButton primary component component border_48 component"
                 type="button"
               >
                 <span
-                  class="label"
+                  class="iconWrapper size-48 center"
                 >
-                  <span
-                    class="iconWrapper size-48 center"
+                  <svg
+                    class="icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="24"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width="24"
                   >
-                    <svg
-                      class="icon"
-                      fill="currentColor"
-                      focusable="false"
-                      height="24"
-                      role="img"
-                      viewBox="0 0 24 24"
-                      width="24"
-                    >
-                      <path
-                        d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
-                      />
-                    </svg>
-                  </span>
+                    <path
+                      d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
@@ -120,29 +116,25 @@ exports[`NotificationManager Snapshots tests should match snapshot 1`] = `
             >
               <button
                 aria-label="закрыть"
-                class="component component component component component text text text size48 hug size48 cc-icon-button closeButton closeButton primary component component border_48 component"
+                class="component cc-icon-button closeButton closeButton primary component component border_48 component"
                 type="button"
               >
                 <span
-                  class="label"
+                  class="iconWrapper size-48 center"
                 >
-                  <span
-                    class="iconWrapper size-48 center"
+                  <svg
+                    class="icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="24"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width="24"
                   >
-                    <svg
-                      class="icon"
-                      fill="currentColor"
-                      focusable="false"
-                      height="24"
-                      role="img"
-                      viewBox="0 0 24 24"
-                      width="24"
-                    >
-                      <path
-                        d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
-                      />
-                    </svg>
-                  </span>
+                    <path
+                      d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
@@ -183,29 +175,25 @@ exports[`NotificationManager Snapshots tests should match snapshot 1`] = `
             >
               <button
                 aria-label="закрыть"
-                class="component component component component component text text text size48 hug size48 cc-icon-button closeButton closeButton primary component component border_48 component"
+                class="component cc-icon-button closeButton closeButton primary component component border_48 component"
                 type="button"
               >
                 <span
-                  class="label"
+                  class="iconWrapper size-48 center"
                 >
-                  <span
-                    class="iconWrapper size-48 center"
+                  <svg
+                    class="icon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="24"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width="24"
                   >
-                    <svg
-                      class="icon"
-                      fill="currentColor"
-                      focusable="false"
-                      height="24"
-                      role="img"
-                      viewBox="0 0 24 24"
-                      width="24"
-                    >
-                      <path
-                        d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
-                      />
-                    </svg>
-                  </span>
+                    <path
+                      d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
diff --git a/packages/notification/src/__snapshots__/Component.test.tsx.snap b/packages/notification/src/__snapshots__/Component.test.tsx.snap
index 6d04068aee..bf840e6dbe 100644
--- a/packages/notification/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/notification/src/__snapshots__/Component.test.tsx.snap
@@ -67,29 +67,25 @@ exports[`Notification Snapshots tests should match snapshot 1`] = `
           >
             <button
               aria-label="закрыть"
-              class="component component component component component text text text size48 hug size48 cc-icon-button closeButton closeButton primary component component border_48 component"
+              class="component cc-icon-button closeButton closeButton primary component component border_48 component"
               type="button"
             >
               <span
-                class="label"
+                class="iconWrapper size-48 center"
               >
-                <span
-                  class="iconWrapper size-48 center"
+                <svg
+                  class="icon"
+                  fill="currentColor"
+                  focusable="false"
+                  height="24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width="24"
                 >
-                  <svg
-                    class="icon"
-                    fill="currentColor"
-                    focusable="false"
-                    height="24"
-                    role="img"
-                    viewBox="0 0 24 24"
-                    width="24"
-                  >
-                    <path
-                      d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
-                    />
-                  </svg>
-                </span>
+                  <path
+                    d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
+                  />
+                </svg>
               </span>
             </button>
           </div>
diff --git a/packages/pass-code-v1/src/components/KeyPadButton/index.module.css b/packages/pass-code-v1/src/components/KeyPadButton/index.module.css
index 60277952b2..8825bb539f 100644
--- a/packages/pass-code-v1/src/components/KeyPadButton/index.module.css
+++ b/packages/pass-code-v1/src/components/KeyPadButton/index.module.css
@@ -6,64 +6,54 @@
     justify-content: center;
     align-items: center;
     padding: var(--gap-0);
-}
-
-.button.button {
-    @mixin action_component_secondary;
 
-    border-radius: var(--border-radius-circle);
-    padding: var(--gap-0);
-    min-width: 64px;
-    width: 64px;
-    height: 64px;
-    text-align: center;
+    .button.button {
+        @mixin action_component_secondary;
 
-    & > span {
-        vertical-align: middle;
+        border-radius: var(--border-radius-circle);
+        width: 64px;
+        height: 64px;
+        text-align: center;
 
-        & > * {
+        & > span {
             vertical-align: middle;
-        }
-    }
-}
-
-.secondary.secondary {
-    color: var(--color-light-text-primary);
-    background: var(--button-bg-color);
-
-    &:hover {
-        color: var(--color-light-text-primary);
-    }
-
-    &:active {
-        background: var(--button-bg-color-active);
-    }
-}
 
-.ghost.ghost {
-    color: var(--color-light-text-primary);
-
-    &:hover {
-        color: var(--color-light-text-primary);
-    }
+            & > * {
+                vertical-align: middle;
+            }
+        }
 
-    &:active {
-        background: var(--button-bg-color-active);
-    }
-}
+        &.secondary.secondary {
+            padding: var(--gap-0);
+            min-width: 64px;
+            color: var(--color-light-text-primary);
+            background: var(--button-bg-color);
+
+            @mixin not-disabled {
+                @mixin hover {
+                    color: var(--color-light-text-primary);
+                }
+
+                &:active {
+                    background: var(--button-bg-color-active);
+                }
+            }
+        }
 
-@media screen and (min-width: 360px) {
-    .button.button {
-        min-width: 76px;
-        height: 76px;
-        width: 76px;
-    }
-}
+        @media screen and (min-width: 360px) {
+            & {
+                min-width: 76px;
+                height: 76px;
+                width: 76px;
+            }
+        }
 
-@media screen and (min-width: 390px) {
-    .button.button {
-        min-width: 86px;
-        width: 86px;
-        height: 86px;
+        @media screen and (min-width: 390px) {
+            & {
+                min-width: 86px;
+                width: 86px;
+                height: 86px;
+            }
+        }
     }
 }
diff --git a/packages/password-input/src/__snapshots__/component.test.tsx.snap b/packages/password-input/src/__snapshots__/component.test.tsx.snap
index d13456d044..8e822d7bed 100644
--- a/packages/password-input/src/__snapshots__/component.test.tsx.snap
+++ b/packages/password-input/src/__snapshots__/component.test.tsx.snap
@@ -26,35 +26,31 @@ exports[`PasswordInput snapshots tests should match snapshot 1`] = `
           class="addons rightAddons rightAddons size-48"
         >
           <button
-            class="component component component component component text text text size48 hug size48 cc-icon-button eye secondary component component border_24 component"
+            class="component cc-icon-button eye secondary component component border_24 component"
             title="Показать"
             type="button"
           >
             <span
-              class="label"
+              class="iconWrapper size-24 center"
             >
-              <span
-                class="iconWrapper size-24 center"
+              <svg
+                class="icon"
+                fill="currentColor"
+                focusable="false"
+                height="24"
+                role="img"
+                viewBox="0 0 24 24"
+                width="24"
               >
-                <svg
-                  class="icon"
-                  fill="currentColor"
-                  focusable="false"
-                  height="24"
-                  role="img"
-                  viewBox="0 0 24 24"
-                  width="24"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M22.015 18.584L5.432 2 4.018 3.413l2.78 2.78C4.252 7.412 2.177 9.484 1 12.003c1.914 4.09 6.19 7.002 11 7.002 2.164 0 4.22-.589 6.001-1.61l2.6 2.601 1.414-1.413zm-6.756-3.93l-1.573-1.573a2 2 0 11-2.763-2.763L9.35 8.745a4.2 4.2 0 105.91 5.91z"
-                    fill-rule="evenodd"
-                  />
-                  <path
-                    d="M23 12.004a11.952 11.952 0 01-1.813 2.778.1.1 0 01-.145.005L11.438 5.18a.098.098 0 01.065-.169c.165-.007.33-.01.497-.01 4.81 0 9.086 2.912 11 7.002z"
-                  />
-                </svg>
-              </span>
+                <path
+                  clip-rule="evenodd"
+                  d="M22.015 18.584L5.432 2 4.018 3.413l2.78 2.78C4.252 7.412 2.177 9.484 1 12.003c1.914 4.09 6.19 7.002 11 7.002 2.164 0 4.22-.589 6.001-1.61l2.6 2.601 1.414-1.413zm-6.756-3.93l-1.573-1.573a2 2 0 11-2.763-2.763L9.35 8.745a4.2 4.2 0 105.91 5.91z"
+                  fill-rule="evenodd"
+                />
+                <path
+                  d="M23 12.004a11.952 11.952 0 01-1.813 2.778.1.1 0 01-.145.005L11.438 5.18a.098.098 0 01.065-.169c.165-.007.33-.01.497-.01 4.81 0 9.086 2.912 11 7.002z"
+                />
+              </svg>
             </span>
           </button>
         </div>
diff --git a/packages/picker-button/src/__snapshots__/Component.test.tsx.snap b/packages/picker-button/src/__snapshots__/Component.test.tsx.snap
index 2ca8b8b20d..624bfa36ae 100644
--- a/packages/picker-button/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/picker-button/src/__snapshots__/Component.test.tsx.snap
@@ -360,29 +360,25 @@ exports[`Snapshots tests should display opened correctly 4`] = `
                           >
                             <button
                               aria-label="закрыть"
-                              class="component component component component component text text text size48 hug size48 cc-icon-button button button mobile primary component component border_32 component"
+                              class="component cc-icon-button button button mobile primary component component border_32 component"
                               type="button"
                             >
                               <span
-                                class="label"
+                                class="iconWrapper size-32 center"
                               >
-                                <span
-                                  class="iconWrapper size-32 center"
+                                <svg
+                                  class="icon"
+                                  fill="currentColor"
+                                  focusable="false"
+                                  height="24"
+                                  role="img"
+                                  viewBox="0 0 24 24"
+                                  width="24"
                                 >
-                                  <svg
-                                    class="icon"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height="24"
-                                    role="img"
-                                    viewBox="0 0 24 24"
-                                    width="24"
-                                  >
-                                    <path
-                                      d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
-                                    />
-                                  </svg>
-                                </span>
+                                  <path
+                                    d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
+                                  />
+                                </svg>
                               </span>
                             </button>
                           </div>
@@ -851,29 +847,25 @@ exports[`Snapshots tests should display opened correctly 6`] = `
                           >
                             <button
                               aria-label="закрыть"
-                              class="component component component component component text text text size48 hug size48 cc-icon-button button button mobile primary component component border_32 component"
+                              class="component cc-icon-button button button mobile primary component component border_32 component"
                               type="button"
                             >
                               <span
-                                class="label"
+                                class="iconWrapper size-32 center"
                               >
-                                <span
-                                  class="iconWrapper size-32 center"
+                                <svg
+                                  class="icon"
+                                  fill="currentColor"
+                                  focusable="false"
+                                  height="24"
+                                  role="img"
+                                  viewBox="0 0 24 24"
+                                  width="24"
                                 >
-                                  <svg
-                                    class="icon"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height="24"
-                                    role="img"
-                                    viewBox="0 0 24 24"
-                                    width="24"
-                                  >
-                                    <path
-                                      d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
-                                    />
-                                  </svg>
-                                </span>
+                                  <path
+                                    d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
+                                  />
+                                </svg>
                               </span>
                             </button>
                           </div>
diff --git a/packages/side-panel/src/__snapshots__/Component.test.tsx.snap b/packages/side-panel/src/__snapshots__/Component.test.tsx.snap
index cb3dc71511..a3ebc9eed6 100644
--- a/packages/side-panel/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/side-panel/src/__snapshots__/Component.test.tsx.snap
@@ -77,29 +77,25 @@ exports[`SidePanelDesktop snapshots tests should match snapshot 1`] = `
                 >
                   <button
                     aria-label="закрыть"
-                    class="component component component component component text text text size48 hug size48 cc-icon-button button button primary component component border_48 component"
+                    class="component cc-icon-button button button primary component component border_48 component"
                     type="button"
                   >
                     <span
-                      class="label"
+                      class="iconWrapper size-48 center"
                     >
-                      <span
-                        class="iconWrapper size-48 center"
+                      <svg
+                        class="icon"
+                        fill="currentColor"
+                        focusable="false"
+                        height="24"
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width="24"
                       >
-                        <svg
-                          class="icon"
-                          fill="currentColor"
-                          focusable="false"
-                          height="24"
-                          role="img"
-                          viewBox="0 0 24 24"
-                          width="24"
-                        >
-                          <path
-                            d="M10 12L3 5.5 5.25 3 12 9.5 18.75 3 21 5.5 14 12l7 6.5-2.25 2.5L12 14.5 5.25 21 3 18.5l7-6.5z"
-                          />
-                        </svg>
-                      </span>
+                        <path
+                          d="M10 12L3 5.5 5.25 3 12 9.5 18.75 3 21 5.5 14 12l7 6.5-2.25 2.5L12 14.5 5.25 21 3 18.5l7-6.5z"
+                        />
+                      </svg>
                     </span>
                   </button>
                 </div>
@@ -219,29 +215,25 @@ exports[`SidePanelMobile snapshots tests should match snapshot 1`] = `
                 >
                   <button
                     aria-label="закрыть"
-                    class="component component component component component text text text size48 hug size48 cc-icon-button button button mobile primary component component border_32 component"
+                    class="component cc-icon-button button button mobile primary component component border_32 component"
                     type="button"
                   >
                     <span
-                      class="label"
+                      class="iconWrapper size-32 center"
                     >
-                      <span
-                        class="iconWrapper size-32 center"
+                      <svg
+                        class="icon"
+                        fill="currentColor"
+                        focusable="false"
+                        height="24"
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width="24"
                       >
-                        <svg
-                          class="icon"
-                          fill="currentColor"
-                          focusable="false"
-                          height="24"
-                          role="img"
-                          viewBox="0 0 24 24"
-                          width="24"
-                        >
-                          <path
-                            d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
-                          />
-                        </svg>
-                      </span>
+                        <path
+                          d="M10.586 12L6 16.5 7.5 18l4.5-4.586L16.5 18l1.5-1.5-4.586-4.5L18 7.5 16.5 6 12 10.586 7.5 6 6 7.5l4.586 4.5z"
+                        />
+                      </svg>
                     </span>
                   </button>
                 </div>

From ae32fe1290aa8c05c355a6b3f6ef073461d3498c Mon Sep 17 00:00:00 2001
From: hextion <100ishundred@gmail.com>
Date: Tue, 7 Oct 2025 15:45:02 +0300
Subject: [PATCH 3/7] refactor(pass-code-v1): used BaseButtonCandidate

---
 .../src/__snapshots__/component.test.tsx.snap | 588 +++++-------------
 packages/pass-code-v1/src/component.test.tsx  |   2 +-
 .../src/components/KeyPad/Component.tsx       |   6 +-
 .../src/components/KeyPadButton/Component.tsx |  42 +-
 .../components/KeyPadButton/index.module.css  |  69 +-
 5 files changed, 220 insertions(+), 487 deletions(-)

diff --git a/packages/pass-code-v1/src/__snapshots__/component.test.tsx.snap b/packages/pass-code-v1/src/__snapshots__/component.test.tsx.snap
index 97a9d3d703..eccff4798d 100644
--- a/packages/pass-code-v1/src/__snapshots__/component.test.tsx.snap
+++ b/packages/pass-code-v1/src/__snapshots__/component.test.tsx.snap
@@ -35,147 +35,67 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with code length 1`] =
     <div
       class="component"
     >
-      <div
-        class="component"
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            1
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        1
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            2
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        2
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            3
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        3
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            4
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        4
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            5
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        5
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            6
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        6
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            7
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        7
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            8
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        8
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            9
-          </span>
-        </button>
-      </div>
+        9
+      </button>
       <div />
-      <div
-        class="component"
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            0
-          </span>
-        </button>
-      </div>
+        0
+      </button>
       <div />
     </div>
   </div>
@@ -206,177 +126,89 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with error prop 1`] = `
     <div
       class="component"
     >
-      <div
-        class="component"
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            1
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        1
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            2
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        2
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            3
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        3
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            4
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        4
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            5
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        5
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            6
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        6
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            7
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        7
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            8
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        8
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            9
-          </span>
-        </button>
-      </div>
+        9
+      </button>
       <div />
-      <div
-        class="component"
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            0
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        0
+      </button>
+      <button
+        class="component component text component"
+        type="button"
       >
-        <button
-          class="component component component component component text text text size56 hug size56 button text component"
-          type="button"
+        <svg
+          fill="currentColor"
+          focusable="false"
+          height="48"
+          role="img"
+          viewBox="0 0 48 48"
+          width="48"
         >
-          <span
-            class="label"
-          >
-            <svg
-              fill="currentColor"
-              focusable="false"
-              height="48"
-              role="img"
-              viewBox="0 0 48 48"
-              width="48"
-            >
-              <path
-                d="M27 22.221l-4.007-4.007-1.765 1.832 3.991 3.962-3.994 3.963 1.77 1.81L27 25.777l4.004 4.004 1.771-1.81-3.996-3.965L32.778 20 31 18.22l-4 4z"
-              />
-              <path
-                clip-rule="evenodd"
-                d="M19.922 11.45a2.99 2.99 0 00-2.132.888l-9.457 9.519a3.022 3.022 0 00-.883 2.142c0 .808.314 1.57.881 2.141l9.46 9.52a2.99 2.99 0 002.131.89H36c2.61 0 4.55-1.922 4.55-4.55V16c0-2.63-1.94-4.55-4.55-4.55H19.922zm-.642 2.368a.889.889 0 01.642-.269H36c.749 0 1.355.26 1.772.678.417.416.678 1.022.678 1.772v16c0 .75-.26 1.356-.678 1.773-.417.417-1.023.677-1.772.677H19.922a.89.89 0 01-.642-.268L9.82 24.66a.921.921 0 01-.27-.662c0-.254.094-.484.272-.662l9.457-9.52z"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
+          <path
+            d="M27 22.221l-4.007-4.007-1.765 1.832 3.991 3.962-3.994 3.963 1.77 1.81L27 25.777l4.004 4.004 1.771-1.81-3.996-3.965L32.778 20 31 18.22l-4 4z"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M19.922 11.45a2.99 2.99 0 00-2.132.888l-9.457 9.519a3.022 3.022 0 00-.883 2.142c0 .808.314 1.57.881 2.141l9.46 9.52a2.99 2.99 0 002.131.89H36c2.61 0 4.55-1.922 4.55-4.55V16c0-2.63-1.94-4.55-4.55-4.55H19.922zm-.642 2.368a.889.889 0 01.642-.269H36c.749 0 1.355.26 1.772.678.417.416.678 1.022.678 1.772v16c0 .75-.26 1.356-.678 1.773-.417.417-1.023.677-1.772.677H19.922a.89.89 0 01-.642-.268L9.82 24.66a.921.921 0 01-.27-.662c0-.254.094-.484.272-.662l9.457-9.52z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </button>
     </div>
   </div>
 </div>
@@ -404,147 +236,67 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with unknown code lengt
     <div
       class="component"
     >
-      <div
-        class="component"
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            1
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        1
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            2
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        2
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            3
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        3
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            4
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        4
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            5
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        5
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            6
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        6
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            7
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        7
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            8
-          </span>
-        </button>
-      </div>
-      <div
-        class="component"
+        8
+      </button>
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            9
-          </span>
-        </button>
-      </div>
+        9
+      </button>
       <div />
-      <div
-        class="component"
+      <button
+        class="component component secondary digit component"
+        type="button"
       >
-        <button
-          class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label"
-          >
-            0
-          </span>
-        </button>
-      </div>
+        0
+      </button>
       <div />
     </div>
   </div>
diff --git a/packages/pass-code-v1/src/component.test.tsx b/packages/pass-code-v1/src/component.test.tsx
index 697ce3c939..ce3f89adc7 100644
--- a/packages/pass-code-v1/src/component.test.tsx
+++ b/packages/pass-code-v1/src/component.test.tsx
@@ -39,7 +39,7 @@ describe('PassCodeV1', () => {
 
             const { getByText } = render(<PassCodeV1 value={currentValue} onChange={cb} />);
 
-            const button = getByText(pressedDigit).parentNode as HTMLButtonElement;
+            const button = getByText(pressedDigit) as HTMLButtonElement;
 
             fireEvent.click(button);
 
diff --git a/packages/pass-code-v1/src/components/KeyPad/Component.tsx b/packages/pass-code-v1/src/components/KeyPad/Component.tsx
index 3f0a5c6c3b..cbd8c5f5a5 100644
--- a/packages/pass-code-v1/src/components/KeyPad/Component.tsx
+++ b/packages/pass-code-v1/src/components/KeyPad/Component.tsx
@@ -81,10 +81,14 @@ export const KeyPad: React.FC<KeyPadProps> = ({
                 return <div key='right-addon-empty' />;
             }
 
+            const handleDigitClick = () => {
+                onClick(digit);
+            };
+
             return (
                 <KeyPadButton
                     key={digit}
-                    onClick={onClick}
+                    onClick={handleDigitClick}
                     view='secondary'
                     buttonClassName={styles.digit}
                     dataTestId={getDataTestId(dataTestId, 'keypad-button')}
diff --git a/packages/pass-code-v1/src/components/KeyPadButton/Component.tsx b/packages/pass-code-v1/src/components/KeyPadButton/Component.tsx
index a1f669a6f5..5979ddd859 100644
--- a/packages/pass-code-v1/src/components/KeyPadButton/Component.tsx
+++ b/packages/pass-code-v1/src/components/KeyPadButton/Component.tsx
@@ -1,20 +1,20 @@
-import React, { type ReactNode } from 'react';
+import React, { type FC, type ReactNode } from 'react';
 import cn from 'classnames';
 
-import { ButtonMobile, type ButtonMobileProps } from '@alfalab/core-components-button/mobile';
+import { BaseButtonCandidate } from '@alfalab/core-components-button/components/base-button-candidate';
 
 import styles from './index.module.css';
 
-export type KeyPadButtonProps<T> = {
+export type KeyPadButtonProps = {
     /**
      * Вид кнопки.
      */
-    view: ButtonMobileProps['view'];
+    view: 'secondary' | 'text';
 
     /**
      * Значение.
      */
-    children: T;
+    children?: ReactNode;
 
     /**
      * Дополнительный класс.
@@ -29,7 +29,7 @@ export type KeyPadButtonProps<T> = {
     /**
      * Коллбэк нажатия на кнопку.
      */
-    onClick?: (payload: T) => void;
+    onClick?: () => void;
 
     /**
      * Идентификатор для систем автоматизированного тестирования.
@@ -37,24 +37,18 @@ export type KeyPadButtonProps<T> = {
     dataTestId?: string;
 };
 
-export function KeyPadButton<T extends ReactNode>({
-    children,
-    onClick,
-    className,
+export const KeyPadButton: FC<KeyPadButtonProps> = ({
     view = 'secondary',
     buttonClassName,
+    children,
     dataTestId,
-}: KeyPadButtonProps<T>) {
-    return (
-        <div className={cn(styles.component, className)}>
-            <ButtonMobile
-                className={cn(styles.button, styles[view], buttonClassName)}
-                view={view}
-                onClick={() => onClick?.(children)}
-                dataTestId={dataTestId}
-            >
-                {children}
-            </ButtonMobile>
-        </div>
-    );
-}
+    onClick,
+}) => (
+    <BaseButtonCandidate
+        className={cn(styles.component, styles[view], buttonClassName)}
+        onClick={onClick}
+        dataTestId={dataTestId}
+    >
+        {children}
+    </BaseButtonCandidate>
+);
diff --git a/packages/pass-code-v1/src/components/KeyPadButton/index.module.css b/packages/pass-code-v1/src/components/KeyPadButton/index.module.css
index 8825bb539f..57c7c16ea9 100644
--- a/packages/pass-code-v1/src/components/KeyPadButton/index.module.css
+++ b/packages/pass-code-v1/src/components/KeyPadButton/index.module.css
@@ -2,58 +2,41 @@
 @import '../../vars.css';
 
 .component {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: var(--gap-0);
+    @mixin action_component_secondary;
 
-    .button.button {
-        @mixin action_component_secondary;
+    border-radius: var(--border-radius-circle);
+    width: 64px;
+    height: 64px;
 
-        border-radius: var(--border-radius-circle);
-        width: 64px;
-        height: 64px;
-        text-align: center;
+    justify-content: center;
+    align-items: center;
+    color: var(--color-light-text-primary);
 
-        & > span {
-            vertical-align: middle;
+    &.secondary {
+        background: var(--button-bg-color);
 
-            & > * {
-                vertical-align: middle;
-            }
+        &:active {
+            background: var(--button-bg-color-active);
         }
+    }
 
-        &.secondary.secondary {
-            padding: var(--gap-0);
-            min-width: 64px;
-            color: var(--color-light-text-primary);
-            background: var(--button-bg-color);
-
-            @mixin not-disabled {
-                @mixin hover {
-                    color: var(--color-light-text-primary);
-                }
-
-                &:active {
-                    background: var(--button-bg-color-active);
-                }
-            }
+    &.text {
+        @mixin hover {
+            color: var(--color-light-text-primary-hover);
         }
 
-        @media screen and (min-width: 360px) {
-            & {
-                min-width: 76px;
-                height: 76px;
-                width: 76px;
-            }
+        &:active {
+            color: var(--color-light-text-primary-press);
         }
+    }
 
-        @media screen and (min-width: 390px) {
-            & {
-                min-width: 86px;
-                width: 86px;
-                height: 86px;
-            }
-        }
+    @media screen and (min-width: 360px) {
+        height: 76px;
+        width: 76px;
+    }
+
+    @media screen and (min-width: 390px) {
+        width: 86px;
+        height: 86px;
     }
 }

From b50bec6688c10cefbf43e6d594e91fb728601894 Mon Sep 17 00:00:00 2001
From: hextion <100ishundred@gmail.com>
Date: Tue, 7 Oct 2025 20:06:50 +0300
Subject: [PATCH 4/7] refactor(pass-code): used BaseButtonCandidate

---
 .../src/__snapshots__/component.test.tsx.snap | 160 +++++-------------
 packages/pass-code/src/component.test.tsx     |   2 +-
 .../src/components/KeyPad/Component.tsx       |  10 +-
 .../src/components/KeyPadButton/Component.tsx |  62 +++----
 .../components/KeyPadButton/index.module.css  |  27 +--
 .../pass-code/src/docs/Component.stories.tsx  |   6 +-
 packages/pass-code/src/docs/description.mdx   |  16 +-
 7 files changed, 82 insertions(+), 201 deletions(-)

diff --git a/packages/pass-code/src/__snapshots__/component.test.tsx.snap b/packages/pass-code/src/__snapshots__/component.test.tsx.snap
index 8f8164dda9..800ae4abd7 100644
--- a/packages/pass-code/src/__snapshots__/component.test.tsx.snap
+++ b/packages/pass-code/src/__snapshots__/component.test.tsx.snap
@@ -53,105 +53,65 @@ exports[`PassCode Snapshot tests should match snapshot with code length 1`] = `
       class="component"
     >
       <button
-        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label"
-        >
-          1
-        </span>
+        1
       </button>
       <button
-        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label"
-        >
-          2
-        </span>
+        2
       </button>
       <button
-        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label"
-        >
-          3
-        </span>
+        3
       </button>
       <button
-        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label"
-        >
-          4
-        </span>
+        4
       </button>
       <button
-        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label"
-        >
-          5
-        </span>
+        5
       </button>
       <button
-        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label"
-        >
-          6
-        </span>
+        6
       </button>
       <button
-        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label"
-        >
-          7
-        </span>
+        7
       </button>
       <button
-        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label"
-        >
-          8
-        </span>
+        8
       </button>
       <button
-        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label"
-        >
-          9
-        </span>
+        9
       </button>
       <div />
       <button
-        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label"
-        >
-          0
-        </span>
+        0
       </button>
       <div />
     </div>
@@ -183,105 +143,65 @@ exports[`PassCode Snapshot tests should match snapshot with unknown code length
       class="component"
     >
       <button
-        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label"
-        >
-          1
-        </span>
+        1
       </button>
       <button
-        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label"
-        >
-          2
-        </span>
+        2
       </button>
       <button
-        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label"
-        >
-          3
-        </span>
+        3
       </button>
       <button
-        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label"
-        >
-          4
-        </span>
+        4
       </button>
       <button
-        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label"
-        >
-          5
-        </span>
+        5
       </button>
       <button
-        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label"
-        >
-          6
-        </span>
+        6
       </button>
       <button
-        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label"
-        >
-          7
-        </span>
+        7
       </button>
       <button
-        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label"
-        >
-          8
-        </span>
+        8
       </button>
       <button
-        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label"
-        >
-          9
-        </span>
+        9
       </button>
       <div />
       <button
-        class="component component component component component secondary secondary secondary size56 hug size56 defaultPaddings defaultWidth minHeight button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label"
-        >
-          0
-        </span>
+        0
       </button>
       <div />
     </div>
diff --git a/packages/pass-code/src/component.test.tsx b/packages/pass-code/src/component.test.tsx
index 94ad123caf..359d07bb7e 100644
--- a/packages/pass-code/src/component.test.tsx
+++ b/packages/pass-code/src/component.test.tsx
@@ -45,7 +45,7 @@ describe('PassCode', () => {
 
             const { getByText } = render(<PassCode value={currentValue} onChange={cb} />);
 
-            const button = getByText(pressedDigit).parentNode as HTMLButtonElement;
+            const button = getByText(pressedDigit) as HTMLButtonElement;
 
             fireEvent.click(button);
 
diff --git a/packages/pass-code/src/components/KeyPad/Component.tsx b/packages/pass-code/src/components/KeyPad/Component.tsx
index 3f8cbc41fd..f35dda2d64 100644
--- a/packages/pass-code/src/components/KeyPad/Component.tsx
+++ b/packages/pass-code/src/components/KeyPad/Component.tsx
@@ -74,9 +74,8 @@ export const KeyPad: React.FC<KeyPadProps> = ({
                         <KeyPadButton
                             key='clear-btn'
                             onClick={onClear}
-                            view='text'
                             dataTestId={getDataTestId(dataTestId, 'backspace-button')}
-                            title='Удалить последний символ'
+                            aria-label='Удалить последний символ'
                         >
                             <BackspaceXxlIcon />
                         </KeyPadButton>
@@ -98,11 +97,14 @@ export const KeyPad: React.FC<KeyPadProps> = ({
                 return <div key='right-addon-empty' />;
             }
 
+            const handleDigitClick = () => {
+                onClick(digit);
+            };
+
             return (
                 <KeyPadButton
                     key={digit}
-                    onClick={onClick}
-                    view='secondary'
+                    onClick={handleDigitClick}
                     buttonClassName={styles.digit}
                     dataTestId={getDataTestId(dataTestId, 'keypad-button')}
                 >
diff --git a/packages/pass-code/src/components/KeyPadButton/Component.tsx b/packages/pass-code/src/components/KeyPadButton/Component.tsx
index 88d080f6b1..7b1a4f34b0 100644
--- a/packages/pass-code/src/components/KeyPadButton/Component.tsx
+++ b/packages/pass-code/src/components/KeyPadButton/Component.tsx
@@ -1,64 +1,48 @@
-import React, { type ReactNode } from 'react';
+import React, { type FC, type ReactNode } from 'react';
 import cn from 'classnames';
 
-import { ButtonMobile, type ButtonMobileProps } from '@alfalab/core-components-button/mobile';
+import { BaseButtonCandidate } from '@alfalab/core-components-button/components/base-button-candidate';
 
 import styles from './index.module.css';
 
-export type KeyPadButtonProps<T> = {
+export interface KeyPadButtonProps {
     /**
-     * Вид кнопки
+     * Значение.
      */
-    view: ButtonMobileProps['view'];
+    children?: ReactNode;
 
     /**
-     * Значение
-     */
-    children: T;
-
-    /**
-     * Дополнительный класс
+     * Дополнительный класс.
      */
     className?: string;
 
     /**
-     * Дополнительный класс кнопки
+     * Дополнительный класс кнопки.
      */
     buttonClassName?: string;
 
     /**
-     * Коллбэк нажатия на кнопку
+     * Коллбэк нажатия на кнопку.
      */
-    onClick?: (payload: T) => void;
+    onClick?: () => void;
 
     /**
-     * Идентификатор для систем автоматизированного тестирования
+     * Идентификатор для систем автоматизированного тестирования.
      */
     dataTestId?: string;
+}
 
-    /**
-     * Заголовок кнопки
-     */
-    title?: string;
-};
-
-export function KeyPadButton<T extends ReactNode>({
-    children,
-    onClick,
-    view = 'secondary',
+export const KeyPadButton: FC<KeyPadButtonProps> = ({
     buttonClassName,
+    children,
     dataTestId,
-    title,
-}: KeyPadButtonProps<T>) {
-    return (
-        <ButtonMobile
-            className={cn(styles.button, styles[view], buttonClassName)}
-            view={view}
-            onClick={() => onClick?.(children)}
-            dataTestId={dataTestId}
-            {...(title && { title })}
-        >
-            {children}
-        </ButtonMobile>
-    );
-}
+    onClick,
+}) => (
+    <BaseButtonCandidate
+        className={cn(styles.component, buttonClassName)}
+        onClick={onClick}
+        dataTestId={dataTestId}
+    >
+        {children}
+    </BaseButtonCandidate>
+);
diff --git a/packages/pass-code/src/components/KeyPadButton/index.module.css b/packages/pass-code/src/components/KeyPadButton/index.module.css
index 5db8662c3e..d2adc43d10 100644
--- a/packages/pass-code/src/components/KeyPadButton/index.module.css
+++ b/packages/pass-code/src/components/KeyPadButton/index.module.css
@@ -1,35 +1,20 @@
 @import '@alfalab/core-components-vars/src/no-typography-index.css';
 @import '../../vars.css';
 
-.button.button {
+.component {
     @mixin action_component_secondary;
 
     border-radius: var(--border-radius-circle);
-    padding: var(--gap-0);
-    min-width: var(--pass-code-button-min-width);
     width: var(--pass-code-button-width);
     height: var(--pass-code-button-height);
 
-    text-align: center;
-
-    & > span {
-        vertical-align: middle;
-
-        & > * {
-            vertical-align: middle;
-        }
-    }
-}
-
-.secondary.secondary,
-.button.button {
+    justify-content: center;
+    align-items: center;
     color: var(--color-light-text-primary);
-    background-color: var(--color-light-transparent-default);
+    background: var(--color-light-transparent-default);
 
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--color-light-transparent-default-hover);
-        }
+    @mixin hover {
+        background-color: var(--color-light-transparent-default-hover);
     }
 
     &:active {
diff --git a/packages/pass-code/src/docs/Component.stories.tsx b/packages/pass-code/src/docs/Component.stories.tsx
index 385b8bee03..bbd72d53ab 100644
--- a/packages/pass-code/src/docs/Component.stories.tsx
+++ b/packages/pass-code/src/docs/Component.stories.tsx
@@ -38,14 +38,12 @@ export const pass_code: Story = {
                         disabled={boolean('disabled', false)}
                         leftAddons={
                             boolean('leftAddons', false) && (
-                                <KeyPadButton view='text' key='left-addon'>
-                                    Забыли код?
-                                </KeyPadButton>
+                                <KeyPadButton key='left-addon'>Забыли код?</KeyPadButton>
                             )
                         }
                         rightAddons={
                             boolean('rightAddons', false) && (
-                                <KeyPadButton view='text' key='right-addon'>
+                                <KeyPadButton key='right-addon'>
                                     <SfFaceIdXxlIcon />
                                 </KeyPadButton>
                             )
diff --git a/packages/pass-code/src/docs/description.mdx b/packages/pass-code/src/docs/description.mdx
index fffa676749..f47a30ac4f 100644
--- a/packages/pass-code/src/docs/description.mdx
+++ b/packages/pass-code/src/docs/description.mdx
@@ -215,13 +215,9 @@ render(() => {
                         onChange={handleChange}
                         error={error}
                         success={isSuccess}
-                        leftAddons={
-                            <KeyPadButton view='text' key='left-addon'>
-                                Забыли код?
-                            </KeyPadButton>
-                        }
+                        leftAddons={<KeyPadButton key='left-addon'>Забыли код?</KeyPadButton>}
                         rightAddons={
-                            <KeyPadButton view='text' key='right-addon'>
+                            <KeyPadButton key='right-addon'>
                                 <SfFaceIdXxlIcon />
                             </KeyPadButton>
                         }
@@ -272,13 +268,9 @@ render(() => {
                 onChange={handleChange}
                 error={error}
                 success={isSuccess}
-                leftAddons={
-                    <KeyPadButton view='text' key='left-addon'>
-                        Забыли код?
-                    </KeyPadButton>
-                }
+                leftAddons={<KeyPadButton key='left-addon'>Забыли код?</KeyPadButton>}
                 rightAddons={
-                    <KeyPadButton view='text' key='right-addon'>
+                    <KeyPadButton key='right-addon'>
                         <SfFaceIdXxlIcon />
                     </KeyPadButton>
                 }

From 9a49d70ddf2e218e09644d7ff029c7fa24209956 Mon Sep 17 00:00:00 2001
From: hextion <100ishundred@gmail.com>
Date: Wed, 8 Oct 2025 12:07:05 +0300
Subject: [PATCH 5/7] refactor(pattern-lock-v1): button styles

---
 .../src/__snapshots__/component.test.tsx.snap |  4 +--
 .../base-pattern-lock/Component.tsx           | 35 ++++++++++---------
 .../base-pattern-lock/index.module.css        |  9 +++--
 .../src/desktop/desktop.module.css            |  2 +-
 .../src/mobile/mobile.module.css              | 10 ++++--
 5 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/packages/pattern-lock-v1/src/__snapshots__/component.test.tsx.snap b/packages/pattern-lock-v1/src/__snapshots__/component.test.tsx.snap
index 630991db6c..d92d76a7ad 100644
--- a/packages/pattern-lock-v1/src/__snapshots__/component.test.tsx.snap
+++ b/packages/pattern-lock-v1/src/__snapshots__/component.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`PatternLockV1 test Snapshot tests should match snapshot 1`] = `
       class="message"
     />
     <div
-      class="forgotBtn forgotBtn hiddenBtn"
+      class="forgotBtnContainer forgotBtnContainer hiddenBtn"
     />
   </div>
 </div>
@@ -26,7 +26,7 @@ exports[`PatternLockV1 test Snapshot tests should match snapshot with error prop
       Error message
     </div>
     <div
-      class="forgotBtn forgotBtn hiddenBtn"
+      class="forgotBtnContainer forgotBtnContainer hiddenBtn"
     />
   </div>
 </div>
diff --git a/packages/pattern-lock-v1/src/components/base-pattern-lock/Component.tsx b/packages/pattern-lock-v1/src/components/base-pattern-lock/Component.tsx
index ca07026e6e..b7830a5299 100644
--- a/packages/pattern-lock-v1/src/components/base-pattern-lock/Component.tsx
+++ b/packages/pattern-lock-v1/src/components/base-pattern-lock/Component.tsx
@@ -126,23 +126,24 @@ export const BasePatternLock = forwardRef<
                     extraBounds={extraBounds}
                     hover={hover}
                 />
-
-                {showForgotCodeBtn ? (
-                    <ButtonMobile
-                        view='transparent'
-                        className={cn(commonStyles.forgotBtn, styles.forgotBtn)}
-                        onClick={onForgotBtnClick}
-                        dataTestId={getDataTestId(dataTestId, 'forgot-code-btn')}
-                    >
-                        {forgotCodeBtnText}
-                    </ButtonMobile>
-                ) : (
-                    <div
-                        className={cn(commonStyles.forgotBtn, styles.forgotBtn, {
-                            [styles.hiddenBtn]: Boolean(styles.hiddenBtn),
-                        })}
-                    />
-                )}
+                <div
+                    className={cn(
+                        commonStyles.forgotBtnContainer,
+                        styles.forgotBtnContainer,
+                        styles.hiddenBtn,
+                    )}
+                >
+                    {showForgotCodeBtn && (
+                        <ButtonMobile
+                            view='transparent'
+                            className={cn(commonStyles.forgotBtn, styles.forgotBtn)}
+                            onClick={onForgotBtnClick}
+                            dataTestId={getDataTestId(dataTestId, 'forgot-code-btn')}
+                        >
+                            {forgotCodeBtnText}
+                        </ButtonMobile>
+                    )}
+                </div>
             </div>
         );
     },
diff --git a/packages/pattern-lock-v1/src/components/base-pattern-lock/index.module.css b/packages/pattern-lock-v1/src/components/base-pattern-lock/index.module.css
index a9b297ba41..e02b49b74d 100644
--- a/packages/pattern-lock-v1/src/components/base-pattern-lock/index.module.css
+++ b/packages/pattern-lock-v1/src/components/base-pattern-lock/index.module.css
@@ -28,7 +28,12 @@
     color: var(--color-light-text-negative);
 }
 
-.forgotBtn {
-    display: block;
+.forgotBtnContainer {
+    display: flex;
+    justify-content: center;
+}
+
+.forgotBtnContainer,
+.forgotBtn.forgotBtn.forgotBtn {
     min-height: var(--size-xs-height);
 }
diff --git a/packages/pattern-lock-v1/src/desktop/desktop.module.css b/packages/pattern-lock-v1/src/desktop/desktop.module.css
index f9a14de1e5..d580c66f7e 100644
--- a/packages/pattern-lock-v1/src/desktop/desktop.module.css
+++ b/packages/pattern-lock-v1/src/desktop/desktop.module.css
@@ -6,7 +6,7 @@
     margin: var(--gap-8) var(--gap-0) var(--gap-24) var(--gap-0);
 }
 
-.forgotBtn {
+.forgotBtnContainer {
     margin: var(--gap-24) auto var(--gap-0);
 }
 
diff --git a/packages/pattern-lock-v1/src/mobile/mobile.module.css b/packages/pattern-lock-v1/src/mobile/mobile.module.css
index 771c91fc56..9caaaa80e1 100644
--- a/packages/pattern-lock-v1/src/mobile/mobile.module.css
+++ b/packages/pattern-lock-v1/src/mobile/mobile.module.css
@@ -6,13 +6,16 @@
     margin: var(--gap-8) var(--gap-0) var(--gap-24) var(--gap-0);
 }
 
-.forgotBtn {
+.forgotBtnContainer {
     margin: var(--gap-24) auto var(--gap-0);
 }
 
 @media screen and (min-width: 360px) {
-    .forgotBtn {
+    .forgotBtnContainer {
         margin-top: var(--gap-32);
+    }
+    .forgotBtnContainer,
+    .forgotBtn.forgotBtn.forgotBtn {
         min-height: var(--size-s-height);
     }
 
@@ -22,7 +25,8 @@
 }
 
 @media screen and (min-width: 390px) {
-    .forgotBtn {
+    .forgotBtnContainer,
+    .forgotBtn.forgotBtn.forgotBtn {
         min-height: var(--size-m-height);
     }
 

From 5604c36d5b22cdd8d17a5d47f07fdcbcbe056125 Mon Sep 17 00:00:00 2001
From: hextion <100ishundred@gmail.com>
Date: Wed, 8 Oct 2025 12:34:47 +0300
Subject: [PATCH 6/7] refactor(pattern-lock): button styles

---
 .../src/__snapshots__/component.test.tsx.snap |  2 +-
 .../base-pattern-lock/Component.tsx           | 21 ++++++++++---------
 .../base-pattern-lock/index.module.css        |  7 ++++---
 .../src/desktop/Component.desktop.tsx         |  4 +---
 .../src/desktop/desktop.module.css            | 15 -------------
 .../src/mobile/Component.mobile.tsx           |  4 +---
 .../pattern-lock/src/mobile/mobile.module.css | 11 ----------
 packages/pattern-lock/src/typings.ts          |  4 ----
 8 files changed, 18 insertions(+), 50 deletions(-)
 delete mode 100644 packages/pattern-lock/src/desktop/desktop.module.css
 delete mode 100644 packages/pattern-lock/src/mobile/mobile.module.css

diff --git a/packages/pattern-lock/src/__snapshots__/component.test.tsx.snap b/packages/pattern-lock/src/__snapshots__/component.test.tsx.snap
index 575242d8d9..bf276cc7fa 100644
--- a/packages/pattern-lock/src/__snapshots__/component.test.tsx.snap
+++ b/packages/pattern-lock/src/__snapshots__/component.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`PatternLock test Snapshot tests should match snapshot 1`] = `
 <div>
   <div
-    class="component component"
+    class="component"
   >
     <div
       class="canvasContainer"
diff --git a/packages/pattern-lock/src/components/base-pattern-lock/Component.tsx b/packages/pattern-lock/src/components/base-pattern-lock/Component.tsx
index c0c53833be..aef5305323 100644
--- a/packages/pattern-lock/src/components/base-pattern-lock/Component.tsx
+++ b/packages/pattern-lock/src/components/base-pattern-lock/Component.tsx
@@ -36,7 +36,6 @@ export const BasePatternLock = forwardRef<
             extraBounds = DEFAULT_EXTRA_BOUNDS,
             messageClassName,
             hover,
-            styles = {},
             disabled = false,
             ...restProps
         },
@@ -90,7 +89,7 @@ export const BasePatternLock = forwardRef<
 
         return (
             <div
-                className={cn(commonStyles.component, styles.component, className, {
+                className={cn(commonStyles.component, className, {
                     [commonStyles.hidden]: !params,
                     [commonStyles.withForgotBtn]: showForgotCodeBtn,
                     [commonStyles.disabled]: disabled,
@@ -112,14 +111,16 @@ export const BasePatternLock = forwardRef<
                     </div>
                 </div>
                 {showForgotCodeBtn && (
-                    <ButtonMobile
-                        view='transparent'
-                        className={cn(commonStyles.forgotBtn, styles.forgotBtn)}
-                        onClick={onForgotBtnClick}
-                        dataTestId={getDataTestId(dataTestId, 'forgot-code-btn')}
-                    >
-                        {forgotCodeBtnText}
-                    </ButtonMobile>
+                    <div className={commonStyles.forgotBtnContainer}>
+                        <ButtonMobile
+                            view='transparent'
+                            size={40}
+                            onClick={onForgotBtnClick}
+                            dataTestId={getDataTestId(dataTestId, 'forgot-code-btn')}
+                        >
+                            {forgotCodeBtnText}
+                        </ButtonMobile>
+                    </div>
                 )}
             </div>
         );
diff --git a/packages/pattern-lock/src/components/base-pattern-lock/index.module.css b/packages/pattern-lock/src/components/base-pattern-lock/index.module.css
index 8afcb3af9c..38ff009988 100644
--- a/packages/pattern-lock/src/components/base-pattern-lock/index.module.css
+++ b/packages/pattern-lock/src/components/base-pattern-lock/index.module.css
@@ -35,7 +35,8 @@
     min-height: var(--pattern-lock-with-forgot-btn-min-height);
 }
 
-.forgotBtn {
-    display: block;
-    min-height: var(--size-xs-height);
+.forgotBtnContainer {
+    display: flex;
+    justify-content: center;
+    margin: var(--gap-8) auto var(--gap-0);
 }
diff --git a/packages/pattern-lock/src/desktop/Component.desktop.tsx b/packages/pattern-lock/src/desktop/Component.desktop.tsx
index be765912c1..880305a092 100644
--- a/packages/pattern-lock/src/desktop/Component.desktop.tsx
+++ b/packages/pattern-lock/src/desktop/Component.desktop.tsx
@@ -5,10 +5,8 @@ import { type TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
 import { BasePatternLock } from '../components/base-pattern-lock';
 import { type CommonPatternLockProps } from '../typings';
 
-import styles from './desktop.module.css';
-
 export const PatternLockDesktop = forwardRef<TPatternLockInstance, CommonPatternLockProps>(
-    (restProps, ref) => <BasePatternLock {...restProps} hover={true} ref={ref} styles={styles} />,
+    (restProps, ref) => <BasePatternLock {...restProps} hover={true} ref={ref} />,
 );
 
 PatternLockDesktop.displayName = 'PatternLockDesktop';
diff --git a/packages/pattern-lock/src/desktop/desktop.module.css b/packages/pattern-lock/src/desktop/desktop.module.css
deleted file mode 100644
index 6c6b96266e..0000000000
--- a/packages/pattern-lock/src/desktop/desktop.module.css
+++ /dev/null
@@ -1,15 +0,0 @@
-@import '@alfalab/core-components-vars/src/no-typography-index.css';
-@import '../vars.css';
-
-.component {
-    margin: var(--gap-0) auto;
-    min-width: var(--pattern-lock-min-width);
-}
-
-.forgotBtn {
-    margin: var(--gap-8) auto var(--gap-0);
-}
-
-.hiddenBtn {
-    display: none;
-}
diff --git a/packages/pattern-lock/src/mobile/Component.mobile.tsx b/packages/pattern-lock/src/mobile/Component.mobile.tsx
index 98efd99c02..36735aab1d 100644
--- a/packages/pattern-lock/src/mobile/Component.mobile.tsx
+++ b/packages/pattern-lock/src/mobile/Component.mobile.tsx
@@ -5,10 +5,8 @@ import { type TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';
 import { BasePatternLock } from '../components/base-pattern-lock';
 import { type CommonPatternLockProps } from '../typings';
 
-import styles from './mobile.module.css';
-
 export const PatternLockMobile = forwardRef<TPatternLockInstance, CommonPatternLockProps>(
-    (restProps, ref) => <BasePatternLock {...restProps} ref={ref} styles={styles} />,
+    (restProps, ref) => <BasePatternLock {...restProps} ref={ref} />,
 );
 
 PatternLockMobile.displayName = 'PatternLockMobile';
diff --git a/packages/pattern-lock/src/mobile/mobile.module.css b/packages/pattern-lock/src/mobile/mobile.module.css
deleted file mode 100644
index 57d3ff2840..0000000000
--- a/packages/pattern-lock/src/mobile/mobile.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-@import '@alfalab/core-components-vars/src/no-typography-index.css';
-@import '../vars.css';
-
-.component {
-    margin: var(--gap-0) auto;
-    min-width: var(--pattern-lock-min-width);
-}
-
-.forgotBtn {
-    margin: var(--gap-8) auto var(--gap-0);
-}
diff --git a/packages/pattern-lock/src/typings.ts b/packages/pattern-lock/src/typings.ts
index e17ec2e02b..e8d6b1d102 100644
--- a/packages/pattern-lock/src/typings.ts
+++ b/packages/pattern-lock/src/typings.ts
@@ -75,10 +75,6 @@ export type PrivatePatternLockProps = {
      * Включает ховер-эффект
      */
     hover?: boolean;
-    /**
-     * Стили компонента
-     */
-    styles: { [key: string]: string };
 };
 
 export type PatternLockProps = CommonPatternLockProps & {

From 30f62609c180be4a31a2234de1acc1c1f5582850 Mon Sep 17 00:00:00 2001
From: hextion <100ishundred@gmail.com>
Date: Sat, 28 Feb 2026 15:39:41 +0300
Subject: [PATCH 7/7] test: updated screenshots

---
 ...-lock-screenshots-default-with-forgot-code-button-snap.png | 4 ++--
 .../tabs-text-style-prop-text-style-13-snap.png               | 4 ++--
 .../tabs-text-style-prop-text-style-2-snap.png                | 4 ++--
 .../tabs-text-style-prop-text-style-5-snap.png                | 4 ++--
 .../tabs-text-style-prop-text-style-8-snap.png                | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/pattern-lock/src/__image_snapshots__/pattern-lock-screenshots-default-with-forgot-code-button-snap.png b/packages/pattern-lock/src/__image_snapshots__/pattern-lock-screenshots-default-with-forgot-code-button-snap.png
index 678ec1c6d2..dc230a1366 100644
--- a/packages/pattern-lock/src/__image_snapshots__/pattern-lock-screenshots-default-with-forgot-code-button-snap.png
+++ b/packages/pattern-lock/src/__image_snapshots__/pattern-lock-screenshots-default-with-forgot-code-button-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5a8cc30205a0fdb528b64a54dbbd964a50b854d6a090b50cea8d2386e56df0d0
-size 9019
+oid sha256:bc7add260dd67f0f0bc65e793dec0b4f5bc8d617ee1624f013d3cab03f07de79
+size 8754
diff --git a/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-13-snap.png b/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-13-snap.png
index 08611e4447..e3478b185e 100644
--- a/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-13-snap.png
+++ b/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-13-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c572698e7a2e6b6aeb77c40a9ca443c03e0931b5790e58a383bd02cb3094af18
-size 7987
+oid sha256:699e84b4e35ad13f7201dbc5f96010d60011b7c08c69a45e5a85b747ea152ee8
+size 8080
diff --git a/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-2-snap.png b/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-2-snap.png
index 294994425a..b1f440a8dd 100644
--- a/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-2-snap.png
+++ b/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-2-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9750825ae110dd40bde417cf16122bc38db622435a9513925873b1123ad7c325
-size 7351
+oid sha256:af7c24f6602e818ae138537b17ef602e8dd26971de8ddec945caa782aa013c9b
+size 7369
diff --git a/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-5-snap.png b/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-5-snap.png
index d66f0440fa..c82d9fc6cc 100644
--- a/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-5-snap.png
+++ b/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-5-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ac058c0ff04f565cd6208bd5ede546cbaea78c1f85d3bb508c3efbf6ad827c56
-size 7610
+oid sha256:cd1cb94c931408904930ae306883ef68861a3553993c4ede7e576b57ec7928b8
+size 7738
diff --git a/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-8-snap.png b/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-8-snap.png
index a98d0227ee..d2efdd3305 100644
--- a/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-8-snap.png
+++ b/packages/tabs/src/__image_snapshots__/tabs-text-style-prop-text-style-8-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5a4f1bf6046223e353ac71e2ab94df0d05c05d51d770f03317d24a65fc5f2250
-size 7824
+oid sha256:008ac7a1272a95c5c3dc345d30e81705d9ba1fb98911da94418ce0f004870c8a
+size 7837