From d836279533e0918ebbd1e1f3d707b0a07775f10d Mon Sep 17 00:00:00 2001
From: hextion <100ishundred@gmail.com>
Date: Thu, 2 Oct 2025 10:03:53 +0300
Subject: [PATCH 01/11] fix(button): rework component props

---
 packages/button/src/Component.responsive.tsx  |  4 +-
 packages/button/src/Component.test.tsx        | 25 +++---
 .../src/__snapshots__/Component.test.tsx.snap |  8 +-
 .../src/components/base-button/Component.tsx  | 80 +++++--------------
 .../components/button-component/Component.tsx | 28 +++++++
 .../src/components/button-component/index.ts  |  1 +
 .../button/src/desktop/Component.desktop.tsx  | 10 +--
 .../button/src/mobile/Component.mobile.tsx    | 10 +--
 packages/button/src/typings.ts                | 61 +++++++++-----
 .../src/__snapshots__/Component.test.tsx.snap |  9 ---
 .../src/__snapshots__/Component.test.tsx.snap |  2 +
 .../src/__snapshots__/Component.test.tsx.snap |  2 +
 12 files changed, 125 insertions(+), 115 deletions(-)
 create mode 100644 packages/button/src/components/button-component/Component.tsx
 create mode 100644 packages/button/src/components/button-component/index.ts

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..629292e63b 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');
         });
     });
 
@@ -312,18 +312,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 = (props: { href?: string }) => {
+                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..9f5b301d9f 100644
--- a/packages/button/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/button/src/__snapshots__/Component.test.tsx.snap
@@ -77,6 +77,7 @@ exports[`Button Snapshots tests should render anchor if href pass 1`] = `
   "baseElement": <body>
     <div>
       <a
+        aria-disabled="false"
         class="component secondary size-56 hug size-56 component secondary component secondary iconOnly"
         href="https://some-url"
       />
@@ -84,6 +85,7 @@ exports[`Button Snapshots tests should render anchor if href pass 1`] = `
   </body>,
   "container": <div>
     <a
+      aria-disabled="false"
       class="component secondary size-56 hug size-56 component secondary component secondary iconOnly"
       href="https://some-url"
     />
@@ -306,8 +308,8 @@ exports[`Button Snapshots tests should render loader if loading & href pass 1`]
   "baseElement": <body>
     <div>
       <a
+        aria-disabled="false"
         class="component secondary size-56 hug size-56 component secondary component secondary iconOnly loading"
-        disabled=""
         href="https://some-url"
       >
         <svg
@@ -351,8 +353,8 @@ exports[`Button Snapshots tests should render loader if loading & href pass 1`]
   </body>,
   "container": <div>
     <a
+      aria-disabled="false"
       class="component secondary size-56 hug size-56 component secondary component secondary iconOnly loading"
-      disabled=""
       href="https://some-url"
     >
       <svg
@@ -454,7 +456,6 @@ exports[`Button Snapshots tests should render loader if loading pass 1`] = `
     <div>
       <button
         class="component secondary size-56 hug size-56 component secondary component secondary iconOnly loading"
-        disabled=""
         type="button"
       >
         <svg
@@ -499,7 +500,6 @@ exports[`Button Snapshots tests should render loader if loading pass 1`] = `
   "container": <div>
     <button
       class="component secondary size-56 hug size-56 component secondary component secondary iconOnly loading"
-      disabled=""
       type="button"
     >
       <svg
diff --git a/packages/button/src/components/base-button/Component.tsx b/packages/button/src/components/base-button/Component.tsx
index bc077957f4..9bee0c49ef 100644
--- a/packages/button/src/components/base-button/Component.tsx
+++ b/packages/button/src/components/base-button/Component.tsx
@@ -1,21 +1,15 @@
 /* eslint-disable complexity */
-import React, {
-    type AnchorHTMLAttributes,
-    type ButtonHTMLAttributes,
-    forwardRef,
-    useEffect,
-    useRef,
-    useState,
-} from 'react';
+import React, { forwardRef, type MouseEventHandler, useEffect, useRef, useState } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
-import { getDataTestId } from '@alfalab/core-components-shared';
+import { getDataTestId, isNonNullable } 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 { type ButtonRef, type CommonButtonProps, type PrivateButtonProps } from '../../typings';
+import { ButtonComponent } from '../button-component';
 
 import defaultColors from './default.module.css';
 import commonStyles from './index.module.css';
@@ -26,10 +20,7 @@ const colorStyles = {
     inverted: invertedColors,
 };
 
-export const BaseButton = forwardRef<
-    HTMLAnchorElement | HTMLButtonElement,
-    CommonButtonProps & PrivateButtonProps
->(
+export const BaseButton = forwardRef<ButtonRef, CommonButtonProps & PrivateButtonProps>(
     (
         {
             allowBackdropBlur,
@@ -45,14 +36,15 @@ export const BaseButton = forwardRef<
             className,
             spinnerClassName,
             dataTestId,
-            href,
             loading = false,
             nowrap = false,
             colors = 'default',
-            Component = href ? 'a' : 'button',
+            Component = ButtonComponent,
             onClick,
             styles = {},
             colorStylesMap = { default: {}, inverted: {} },
+            disabled = false,
+            type = 'button',
             ...restProps
         },
         ref,
@@ -63,7 +55,7 @@ export const BaseButton = forwardRef<
 
         const [loaderTimePassed, setLoaderTimePassed] = useState(true);
 
-        const timerId = useRef(0);
+        const timerId = useRef<number | null>(null);
 
         const showLoader = loading || !loaderTimePassed;
 
@@ -98,15 +90,9 @@ export const BaseButton = forwardRef<
                 },
                 className,
             ),
-            'data-test-id': dataTestId || null,
+            'data-test-id': dataTestId,
         };
 
-        const {
-            disabled,
-            type = 'button',
-            ...restButtonProps
-        } = restProps as ButtonHTMLAttributes<HTMLButtonElement>;
-
         const buttonChildren = (
             <React.Fragment>
                 {leftAddons && <span className={commonStyles.addons}>{leftAddons}</span>}
@@ -151,58 +137,36 @@ export const BaseButton = forwardRef<
 
                 timerId.current = window.setTimeout(() => {
                     setLoaderTimePassed(true);
+                    timerId.current = null;
                 }, LOADER_MIN_DISPLAY_INTERVAL);
             }
         }, [loading]);
 
         useEffect(
             () => () => {
-                window.clearTimeout(timerId.current);
+                if (isNonNullable(timerId.current)) {
+                    window.clearTimeout(timerId.current);
+                }
             },
             [],
         );
 
-        const handleClick = (
-            e: React.MouseEvent<HTMLAnchorElement, MouseEvent> &
-                React.MouseEvent<HTMLButtonElement, MouseEvent>,
-        ) => {
+        const handleClick: MouseEventHandler<HTMLElement> = (event) => {
             if (disabled || showLoader) {
-                e.preventDefault();
-                e.stopPropagation();
-
-                return;
+                event.preventDefault();
+                event.stopPropagation();
+            } else {
+                onClick?.(event);
             }
-            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}
+                {...restProps}
                 type={type}
-                disabled={disabled || showLoader}
+                disabled={disabled}
+                onClick={handleClick}
                 ref={mergeRefs([buttonRef, ref])}
             >
                 {buttonChildren}
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..0392dc41a0
--- /dev/null
+++ b/packages/button/src/components/button-component/Component.tsx
@@ -0,0 +1,28 @@
+import React, { forwardRef } from 'react';
+import mergeRefs from 'react-merge-refs';
+
+import { type ButtonComponentProps } from '../../typings';
+
+export const ButtonComponent = forwardRef<HTMLElement, ButtonComponentProps>(
+    ({ children, href, type, disabled, rel, ...restProps }, ref) => {
+        const isAnchor = Boolean(href);
+        const Tag = isAnchor ? 'a' : 'button';
+
+        return (
+            <Tag
+                {...restProps}
+                ref={mergeRefs([ref])}
+                rel={
+                    rel ??
+                    (isAnchor && restProps.target === '_blank' ? 'noreferrer noopener' : undefined)
+                }
+                type={isAnchor ? undefined : type}
+                href={isAnchor && !disabled ? href : undefined}
+                disabled={isAnchor ? undefined : disabled}
+                aria-disabled={isAnchor ? disabled : undefined}
+            >
+                {children}
+            </Tag>
+        );
+    },
+);
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/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/typings.ts b/packages/button/src/typings.ts
index 8862954910..728f58f59b 100644
--- a/packages/button/src/typings.ts
+++ b/packages/button/src/typings.ts
@@ -1,20 +1,22 @@
 import {
     type AnchorHTMLAttributes,
     type ButtonHTMLAttributes,
-    type ElementType,
+    type ComponentType,
+    type ForwardRefExoticComponent,
     type ReactNode,
+    type RefAttributes,
 } from 'react';
 
-export type StyleColors = {
-    default: {
-        [key: string]: string;
-    };
-    inverted: {
-        [key: string]: string;
-    };
-};
+interface StylesMap {
+    [key: string]: string;
+}
 
-type ComponentProps = {
+export interface StyleColors {
+    default: StylesMap;
+    inverted: StylesMap;
+}
+
+interface ComponentProps {
     /**
      * Тип кнопки
      * @default secondary
@@ -78,7 +80,17 @@ type ComponentProps = {
     /**
      * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
      */
-    Component?: ElementType;
+    Component?:
+        | ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>
+        | ComponentType<ButtonHTMLAttributes<HTMLButtonElement>>
+        | ComponentType<ButtonComponentProps>
+        | ForwardRefExoticComponent<
+              AnchorHTMLAttributes<HTMLAnchorElement> & RefAttributes<HTMLAnchorElement>
+          >
+        | ForwardRefExoticComponent<
+              ButtonHTMLAttributes<HTMLButtonElement> & RefAttributes<HTMLButtonElement>
+          >
+        | ForwardRefExoticComponent<ButtonComponentProps & RefAttributes<HTMLElement>>;
 
     /**
      * Идентификатор для систем автоматизированного тестирования.
@@ -113,24 +125,35 @@ type ComponentProps = {
      * Дочерние элементы.
      */
     children?: ReactNode;
-};
+}
 
-export type PrivateButtonProps = {
+export interface PrivateButtonProps {
     /**
      * Основные стили компонента.
      */
-    styles: { [key: string]: string };
+    styles: StylesMap;
 
     /**
      * Стили компонента для default и inverted режима.
      */
     colorStylesMap: StyleColors;
-};
+}
+
+export type ButtonRef = HTMLElement;
+
+export interface ButtonComponentProps
+    extends ButtonHTMLAttributes<HTMLElement>,
+        Omit<AnchorHTMLAttributes<HTMLElement>, keyof ButtonHTMLAttributes<HTMLElement>> {}
 
-export type CommonButtonProps = ComponentProps &
-    Partial<AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>>;
+export interface CommonButtonProps
+    extends ComponentProps,
+        Omit<ButtonHTMLAttributes<HTMLElement>, keyof ComponentProps>,
+        Omit<
+            AnchorHTMLAttributes<HTMLElement>,
+            keyof ButtonHTMLAttributes<HTMLElement> | keyof ComponentProps
+        > {}
 
-export type ButtonProps = CommonButtonProps & {
+export interface ButtonProps extends CommonButtonProps {
     /**
      * Контрольная точка, с нее начинается desktop версия
      * @default 1024
@@ -147,4 +170,4 @@ export type ButtonProps = CommonButtonProps & {
      * @deprecated Используйте client
      */
     defaultMatchMediaValue?: boolean | (() => boolean);
-};
+}
diff --git a/packages/custom-button/src/__snapshots__/Component.test.tsx.snap b/packages/custom-button/src/__snapshots__/Component.test.tsx.snap
index c331e5d593..58b301f6be 100644
--- a/packages/custom-button/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/custom-button/src/__snapshots__/Component.test.tsx.snap
@@ -967,7 +967,6 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 1`] =
     <div>
       <button
         class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
-        disabled=""
         style="background: rgb(255, 69, 195);"
         type="button"
       >
@@ -1013,7 +1012,6 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 1`] =
   "container": <div>
     <button
       class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
-      disabled=""
       style="background: rgb(255, 69, 195);"
       type="button"
     >
@@ -1116,7 +1114,6 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 2`] =
     <div>
       <button
         class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
-        disabled=""
         style="background: rgb(255, 69, 195);"
         type="button"
       >
@@ -1161,7 +1158,6 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 2`] =
     <div>
       <button
         class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
-        disabled=""
         style="background: rgb(255, 69, 195);"
         type="button"
       >
@@ -1207,7 +1203,6 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 2`] =
   "container": <div>
     <button
       class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
-      disabled=""
       style="background: rgb(255, 69, 195);"
       type="button"
     >
@@ -1310,7 +1305,6 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 3`] =
     <div>
       <button
         class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
-        disabled=""
         style="background: rgb(255, 69, 195);"
         type="button"
       >
@@ -1355,7 +1349,6 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 3`] =
     <div>
       <button
         class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
-        disabled=""
         style="background: rgb(255, 69, 195);"
         type="button"
       >
@@ -1400,7 +1393,6 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 3`] =
     <div>
       <button
         class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
-        disabled=""
         style="background: rgb(255, 69, 195);"
         type="button"
       >
@@ -1446,7 +1438,6 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 3`] =
   "container": <div>
     <button
       class="component primary size-56 hug size-56 component primary component primary iconOnly loading customButton border white darkening disableType-default customLoading"
-      disabled=""
       style="background: rgb(255, 69, 195);"
       type="button"
     >
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 89703563d7..6ff24cfe22 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,6 +49,7 @@ 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 border-24"
           download="новое_название_файла"
@@ -151,6 +152,7 @@ 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 border-24"
         download="новое_название_файла"
diff --git a/packages/icon-button/src/__snapshots__/Component.test.tsx.snap b/packages/icon-button/src/__snapshots__/Component.test.tsx.snap
index a082420f3b..11871ce399 100644
--- a/packages/icon-button/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/icon-button/src/__snapshots__/Component.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`IconButton Href tests should set \`href\` attribute and be link 1`] = `
   "baseElement": <body>
     <div>
       <a
+        aria-disabled="false"
         class="component text size-48 hug size-48 component text component text cc-icon-button primary component border-48"
         data-test-id="test-id"
         href="http://example.com"
@@ -36,6 +37,7 @@ exports[`IconButton Href tests should set \`href\` attribute and be link 1`] = `
   </body>,
   "container": <div>
     <a
+      aria-disabled="false"
       class="component text size-48 hug size-48 component text component text cc-icon-button primary component border-48"
       data-test-id="test-id"
       href="http://example.com"

From 62c0a2b8e9a0731f4f49d7d30377389475baa863 Mon Sep 17 00:00:00 2001
From: hextion <100ishundred@gmail.com>
Date: Fri, 3 Oct 2025 17:39:03 +0300
Subject: [PATCH 02/11] refactor(button): prepare to BaseButton

---
 .../src/__snapshots__/Component.test.tsx.snap |   2 +-
 .../src/__snapshots__/Component.test.tsx.snap |  28 +-
 .../src/components/base-button/Component.tsx  |  14 +-
 .../components/base-button/default.module.css | 268 +++++-----
 .../components/base-button/index.module.css   | 439 ++++++++--------
 .../base-button/inverted.module.css           | 256 +++++-----
 .../components/button-component/Component.tsx |   7 +-
 .../button-component/index.module.css         |  15 +
 .../src/desktop/default.desktop.module.css    | 102 ++--
 .../button/src/desktop/desktop.module.css     |  36 +-
 .../src/desktop/inverted.desktop.module.css   |  98 ++--
 .../src/mobile/default.mobile.module.css      |  92 ++--
 .../src/mobile/inverted.mobile.module.css     |  96 ++--
 packages/button/src/mobile/mobile.module.css  |  36 +-
 packages/button/src/vars.css                  |   1 +
 .../src/__snapshots__/Component.test.tsx.snap | 130 ++---
 .../src/__snapshots__/Component.test.tsx.snap |  64 +--
 .../src/__snapshots__/Component.test.tsx.snap | 480 +++++++++---------
 .../__snapshots__/Component.test.tsx.snap     |   8 +-
 .../src/__snapshots__/Component.test.tsx.snap |   2 +-
 .../src/__snapshots__/Component.test.tsx.snap |   6 +-
 .../src/__snapshots__/Component.test.tsx.snap |  90 ++--
 .../src/__snapshots__/Component.test.tsx.snap |  36 +-
 .../src/__snapshots__/Component.test.tsx.snap |   8 +-
 .../src/__snapshots__/Component.test.tsx.snap |   8 +-
 .../src/__snapshots__/Component.test.tsx.snap |   6 +-
 .../src/__snapshots__/Component.test.tsx.snap |   8 +-
 .../src/__snapshots__/Component.test.tsx.snap |   4 +-
 .../src/__snapshots__/component.test.tsx.snap |   6 +-
 .../src/__snapshots__/Component.test.tsx.snap |   2 +-
 .../src/__snapshots__/component.test.tsx.snap |  62 +--
 .../src/__snapshots__/component.test.tsx.snap |  40 +-
 .../src/__snapshots__/component.test.tsx.snap |   2 +-
 .../src/__snapshots__/Component.test.tsx.snap |  18 +-
 .../src/__snapshots__/Component.test.tsx.snap |   8 +-
 packages/vars/src/mixins.css                  |  13 +
 36 files changed, 1266 insertions(+), 1225 deletions(-)
 create mode 100644 packages/button/src/components/button-component/index.module.css

diff --git a/packages/attach/src/__snapshots__/Component.test.tsx.snap b/packages/attach/src/__snapshots__/Component.test.tsx.snap
index e6274801c6..537986e6df 100644
--- a/packages/attach/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/attach/src/__snapshots__/Component.test.tsx.snap
@@ -6,7 +6,7 @@ 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 secondary secondary secondary size-48 hug size-48 withLeftAddons component"
       type="button"
     >
       <span
diff --git a/packages/button/src/__snapshots__/Component.test.tsx.snap b/packages/button/src/__snapshots__/Component.test.tsx.snap
index 9f5b301d9f..f88e91dcb2 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 secondary secondary secondary size-56 hug size-56 iconOnly 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 secondary secondary secondary size-56 hug size-56 iconOnly component"
       type="button"
     />
   </div>,
@@ -78,7 +78,7 @@ exports[`Button Snapshots tests should render anchor if href pass 1`] = `
     <div>
       <a
         aria-disabled="false"
-        class="component secondary size-56 hug size-56 component secondary component secondary iconOnly"
+        class="component component component component secondary secondary secondary size-56 hug size-56 iconOnly component"
         href="https://some-url"
       />
     </div>
@@ -86,7 +86,7 @@ exports[`Button Snapshots tests should render anchor if href pass 1`] = `
   "container": <div>
     <a
       aria-disabled="false"
-      class="component secondary size-56 hug size-56 component secondary component secondary iconOnly"
+      class="component component component component secondary secondary secondary size-56 hug size-56 iconOnly component"
       href="https://some-url"
     />
   </div>,
@@ -150,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 secondary secondary secondary size-56 hug size-56 iconOnly 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 secondary secondary secondary size-56 hug size-56 iconOnly component"
       type="button"
     />
   </div>,
@@ -221,7 +221,7 @@ 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 secondary secondary secondary size-56 hug size-56 iconOnly component"
         type="button"
       >
         <span
@@ -236,7 +236,7 @@ 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 secondary secondary secondary size-56 hug size-56 iconOnly component"
       type="button"
     >
       <span
@@ -309,7 +309,7 @@ exports[`Button Snapshots tests should render loader if loading & href pass 1`]
     <div>
       <a
         aria-disabled="false"
-        class="component secondary size-56 hug size-56 component secondary component secondary iconOnly loading"
+        class="component component component component secondary secondary secondary size-56 hug size-56 iconOnly loading component"
         href="https://some-url"
       >
         <svg
@@ -354,7 +354,7 @@ exports[`Button Snapshots tests should render loader if loading & href pass 1`]
   "container": <div>
     <a
       aria-disabled="false"
-      class="component secondary size-56 hug size-56 component secondary component secondary iconOnly loading"
+      class="component component component component secondary secondary secondary size-56 hug size-56 iconOnly loading component"
       href="https://some-url"
     >
       <svg
@@ -455,7 +455,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 component component component secondary secondary secondary size-56 hug size-56 iconOnly loading component"
         type="button"
       >
         <svg
@@ -499,7 +499,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 component component component secondary secondary secondary size-56 hug size-56 iconOnly loading component"
       type="button"
     >
       <svg
@@ -600,7 +600,7 @@ 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 secondary secondary secondary size-56 hug size-56 iconOnly component"
         type="button"
       >
         <span
@@ -615,7 +615,7 @@ 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 secondary secondary secondary size-56 hug size-56 iconOnly component"
       type="button"
     >
       <span
diff --git a/packages/button/src/components/base-button/Component.tsx b/packages/button/src/components/base-button/Component.tsx
index 9bee0c49ef..abc8ae724b 100644
--- a/packages/button/src/components/base-button/Component.tsx
+++ b/packages/button/src/components/base-button/Component.tsx
@@ -36,6 +36,7 @@ export const BaseButton = forwardRef<ButtonRef, CommonButtonProps & PrivateButto
             className,
             spinnerClassName,
             dataTestId,
+            href,
             loading = false,
             nowrap = false,
             colors = 'default',
@@ -65,20 +66,23 @@ export const BaseButton = forwardRef<ButtonRef, CommonButtonProps & PrivateButto
 
         const sizeStyle = `size-${size}`;
 
+        const passDisabledClass = disabled && Boolean(href);
+
         const componentProps = {
             className: cn(
                 commonStyles.component,
+                colorStyles[colors].component,
+                styles.component,
+                colorStylesMap[colors].component,
                 commonStyles[view],
+                colorStyles[colors][view],
+                colorStylesMap[colors][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,
@@ -88,6 +92,7 @@ export const BaseButton = forwardRef<ButtonRef, CommonButtonProps & PrivateButto
                     [colorStyles[colors].loading]: showLoader,
                     [colorStylesMap[colors].loading]: showLoader,
                 },
+                passDisabledClass && [styles.disabled, colorStyles[colors].disabled],
                 className,
             ),
             'data-test-id': dataTestId,
@@ -164,6 +169,7 @@ export const BaseButton = forwardRef<ButtonRef, CommonButtonProps & PrivateButto
             <Component
                 {...componentProps}
                 {...restProps}
+                href={href}
                 type={type}
                 disabled={disabled}
                 onClick={handleClick}
diff --git a/packages/button/src/components/base-button/default.module.css b/packages/button/src/components/base-button/default.module.css
index f001e9bc3f..6373dff28a 100644
--- a/packages/button/src/components/base-button/default.module.css
+++ b/packages/button/src/components/base-button/default.module.css
@@ -1,191 +1,191 @@
 @import '../../vars.css';
 
-.accent {
-    color: var(--button-accent-color);
-    background-color: var(--button-accent-base-bg-color);
-    border: 1px solid transparent;
-
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--button-accent-hover-bg-color);
+.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);
-    }
+        &:active {
+            background-color: var(--button-accent-active-bg-color);
+        }
 
-    & > .loader {
-        color: var(--button-spinner-static-color);
+        & > .loader {
+            color: var(--button-spinner-static-color);
+        }
     }
-}
 
-.primary {
-    border: 1px solid transparent;
+    &.primary {
+        border: var(--button-border-width) solid transparent;
 
-    & .hint {
-        color: var(--button-primary-hint-color);
+        & .hint {
+            color: var(--button-primary-hint-color);
+        }
     }
-}
 
-.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);
+        }
 
-    & .hint {
-        color: var(--button-secondary-hint-color);
+        & .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);
+            }
         }
-    }
 
-    &: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);
+        }
 
-    & .hint {
-        color: var(--button-outlined-hint-color);
+        & .hint {
+            color: var(--button-outlined-hint-color);
+        }
     }
-}
 
-.tertiary {
-    color: var(--button-tertiary-color);
-    background-color: var(--button-tertiary-base-bg-color);
-    border: 1px solid var(--button-tertiary-base-border-color);
+    &.tertiary {
+        color: var(--button-tertiary-color);
+        background-color: var(--button-tertiary-base-bg-color);
+        border: var(--button-border-width) solid var(--button-tertiary-base-border-color);
+
+        @mixin not-disabled {
+            @mixin hover {
+                background-color: var(--button-tertiary-hover-bg-color);
+                border-color: var(--button-tertiary-hover-border-color);
+            }
+        }
 
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--button-tertiary-hover-bg-color);
-            border-color: var(--button-tertiary-hover-border-color);
+        &:active {
+            background-color: var(--button-tertiary-active-bg-color);
         }
-    }
 
-    &:active {
-        background-color: var(--button-tertiary-active-bg-color);
-    }
+        & > .loader {
+            color: var(--button-spinner-default-color);
+        }
 
-    & > .loader {
-        color: var(--button-spinner-default-color);
+        & .hint {
+            color: var(--button-tertiary-hint-color);
+        }
     }
 
-    & .hint {
-        color: var(--button-tertiary-hint-color);
-    }
-}
-
-.transparent {
-    color: var(--button-transparent-base-color);
-    background-color: transparent;
-    border: 1px solid transparent;
+    &.transparent {
+        color: var(--button-transparent-base-color);
+        background-color: transparent;
+        border: var(--button-border-width) solid transparent;
 
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--button-transparent-hover-bg-color);
+        @mixin not-disabled {
+            @mixin 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);
+        }
 
-    & .hint {
-        color: var(--button-transparent-base-hint-color);
+        & .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);
 
-    @media (hover: hover) {
-        &:hover {
-            color: var(--button-text-hover-color);
+        @mixin not-disabled {
+            @mixin hover {
+                color: var(--button-text-hover-color);
+            }
         }
-    }
 
-    & > .loader {
-        color: var(--button-spinner-default-color);
-    }
+        & > .loader {
+            color: var(--button-spinner-default-color);
+        }
 
-    & .hint {
-        color: var(--button-text-base-hint-color);
+        & .hint {
+            color: var(--button-text-base-hint-color);
+        }
     }
-}
 
-/* Disabled */
-
-.component[disabled] {
-    &.accent {
-        color: var(--button-accent-disabled-color);
-        background-color: var(--button-accent-disabled-bg-color);
+    @mixin 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);
+            }
         }
-    }
 
-    &.tertiary {
-        background-color: var(--button-tertiary-disabled-bg-color);
+        &.tertiary {
+            background-color: var(--button-tertiary-disabled-bg-color);
 
-        &.loading {
-            color: var(--button-tertiary-color);
-            border-color: var(--button-tertiary-base-border-color);
+            &.loading {
+                color: var(--button-tertiary-color);
+                border-color: var(--button-tertiary-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 38a2dac176..cb7f7084db 100644
--- a/packages/button/src/components/base-button/index.module.css
+++ b/packages/button/src/components/base-button/index.module.css
@@ -1,6 +1,10 @@
 @import '@alfalab/core-components-vars/src/no-typography-index.css';
 @import '../../vars.css';
 
+@define-mixin backdrop-filter {
+    backdrop-filter: blur(80px);
+}
+
 .component {
     && {
         font-weight: var(--button-font-weight);
@@ -16,301 +20,290 @@
     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);
+    &.rounded {
+        border-radius: var(--border-radius-pill);
     }
-}
-
-.focused {
-    @mixin focus-outline;
-}
-
-.loading .label,
-.loading .addons {
-    opacity: 0;
-}
 
-.stretchText {
-    flex-grow: 1;
-}
+    /* Block */
 
-.loader {
-    position: absolute;
-    left: var(--gap-0);
-    right: var(--gap-0);
-    margin: var(--gap-0) auto;
-}
+    &.block {
+        display: flex;
+        width: 100%;
+    }
 
-/* Size */
+    &.hug {
+        justify-content: center;
+        text-align: center;
+    }
 
-/* За счет того, что у кнопок есть border 1px,
-для полного соответствия макетам padding необходимо уменьшить на 1px (16px -> 15px) */
-.size-32 {
-    min-width: 80px;
-    min-height: var(--size-xxs-height);
-    padding: var(--gap-0) 15px;
+    &.fill {
+        text-align: left;
+    }
 
-    @mixin action_primary_small;
+    /* Nowrap */
 
-    &.iconOnly {
-        min-width: var(--size-xxs-height);
+    .nowrap {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
     }
-}
 
-.size-40 {
-    min-width: 88px;
-    min-height: var(--size-xs-height);
-    padding: var(--gap-0) 19px;
+    .stretchText {
+        flex-grow: 1;
+    }
 
-    @mixin action_primary_small;
+    .hint {
+        @mixin paragraph_primary_small;
 
-    &.iconOnly {
-        min-width: var(--size-xs-height);
+        display: block;
     }
-}
 
-.size-48 {
-    min-width: 104px;
-    min-height: var(--size-s-height);
+    .loader {
+        position: absolute;
+        left: var(--gap-0);
+        right: var(--gap-0);
+        margin: var(--gap-0) auto;
+    }
 
-    @mixin action_component_primary;
+    &.focused {
+        @mixin focus-outline;
+    }
 
-    line-height: 20px;
+    &.loading {
+        .label,
+        .addons {
+            opacity: 0;
+        }
+    }
 
-    &.iconOnly {
-        min-width: var(--size-s-height);
+    &.allowBackdropBlur {
+        &.secondary {
+            @mixin backdrop-filter;
+        }
+        &.accent,
+        &.primary {
+            @mixin disabled {
+                @mixin backdrop-filter;
+            }
+        }
     }
-}
 
-.size-56 {
-    min-width: 128px;
-    min-height: var(--size-m-height);
-    padding: var(--gap-0) 27px;
+    /* Size */
 
-    @mixin action_component_primary;
+    /* За счет того, что у кнопок есть border 1px,
+для полного соответствия макетам padding необходимо уменьшить на 1px (16px -> 15px) */
+    &.size-32 {
+        &:not(.iconOnly):not(.text):not(.transparent) {
+            min-width: 80px;
+        }
+        &:not(.text) {
+            min-height: var(--size-xxs-height);
+            padding: var(--gap-0) 15px;
 
-    &.iconOnly {
-        min-width: var(--size-m-height);
-    }
-}
+            &.withLeftAddons {
+                padding-left: 11px;
+            }
 
-.size-64 {
-    min-width: 160px;
-    min-height: var(--size-l-height);
-    padding: var(--gap-0) 31px;
+            &.withRightAddons {
+                padding-right: 11px;
+            }
+        }
 
-    @mixin action_primary_large;
+        @mixin action_primary_small;
 
-    &.iconOnly {
-        min-width: var(--size-l-height);
+        &:not(.text).iconOnly {
+            min-width: var(--size-xxs-height);
+        }
     }
-}
 
-.size-72 {
-    min-width: 168px;
-    min-height: var(--size-xl-height);
-    padding: var(--gap-0) 35px;
+    &.size-40 {
+        &:not(.iconOnly):not(.text):not(.transparent) {
+            min-width: 88px;
+        }
+        &:not(.text) {
+            min-height: var(--size-xs-height);
+            padding: var(--gap-0) 19px;
 
-    @mixin action_primary_large;
+            &.withLeftAddons {
+                padding-left: 15px;
+            }
 
-    &.iconOnly {
-        min-width: var(--size-xl-height);
-    }
-}
+            &.withRightAddons {
+                padding-right: 15px;
+            }
+        }
 
-.withRightAddons {
-    &.size-32 {
-        padding-right: 11px;
-    }
+        @mixin action_primary_small;
 
-    &.size-40 {
-        padding-right: 15px;
+        &:not(.text).iconOnly {
+            min-width: var(--size-xs-height);
+        }
     }
 
     &.size-48 {
-        padding-right: 19px;
-    }
+        &:not(.iconOnly):not(.text):not(.transparent) {
+            min-width: 104px;
+        }
+        &:not(.text) {
+            min-height: var(--size-s-height);
+            padding: var(--gap-0) 23px;
 
-    &.size-56 {
-        padding-right: 23px;
-    }
+            &.withLeftAddons {
+                padding-left: 19px;
+            }
 
-    &.size-64 {
-        padding-right: 27px;
-    }
+            &.withRightAddons {
+                padding-right: 19px;
+            }
+        }
 
-    &.size-72 {
-        padding-right: 31px;
-    }
+        @mixin action_component_primary;
 
-    &.text {
-        padding-right: var(--gap-0);
-    }
-}
+        line-height: 20px;
 
-.withLeftAddons {
-    &.size-32 {
-        padding-left: 11px;
+        &:not(.text).iconOnly {
+            min-width: var(--size-s-height);
+        }
     }
 
-    &.size-40 {
-        padding-left: 15px;
-    }
+    &.size-56 {
+        &:not(.iconOnly):not(.text):not(.transparent) {
+            min-width: 128px;
+        }
+        &:not(.text) {
+            min-height: var(--size-m-height);
+            padding: var(--gap-0) 27px;
 
-    &.size-48 {
-        padding-left: 19px;
-    }
+            &.withLeftAddons {
+                padding-left: 23px;
+            }
 
-    &.size-56 {
-        padding-left: 23px;
-    }
+            &.withRightAddons {
+                padding-right: 23px;
+            }
+        }
 
-    &.size-64 {
-        padding-left: 27px;
-    }
+        @mixin action_component_primary;
 
-    &.size-72 {
-        padding-left: 31px;
+        &:not(.text).iconOnly {
+            min-width: var(--size-m-height);
+        }
     }
 
-    &.text {
-        padding-left: var(--gap-0);
-    }
-}
+    &.size-64 {
+        &:not(.iconOnly):not(.text):not(.transparent) {
+            min-width: 160px;
+        }
+        &:not(.text) {
+            min-height: var(--size-l-height);
+            padding: var(--gap-0) 31px;
 
-.transparent {
-    min-width: 0;
-}
+            &.withLeftAddons {
+                padding-left: 27px;
+            }
 
-.text.text {
-    min-width: 0;
-    min-height: 0;
-    padding: var(--gap-0);
-    border: none;
-    appearance: none;
+            &.withRightAddons {
+                padding-right: 27px;
+            }
+        }
 
-    &.iconOnly {
-        min-width: 0;
-    }
+        @mixin action_primary_large;
 
-    &.size-48,
-    &.size-56 {
-        min-height: 24px;
+        &:not(.text).iconOnly {
+            min-width: var(--size-l-height);
+        }
     }
-}
-
-/* Disabled */
 
-.component[disabled] {
-    cursor: var(--disabled-cursor);
+    &.size-72 {
+        &:not(.iconOnly):not(.text):not(.transparent) {
+            min-width: 168px;
+        }
+        &:not(.text) {
+            min-height: var(--size-xl-height);
+            padding: var(--gap-0) 35px;
 
-    & * {
-        pointer-events: none;
-    }
-}
+            &.withLeftAddons {
+                padding-left: 31px;
+            }
 
-/* Addons */
+            &.withRightAddons {
+                &.size-72 {
+                    padding-right: 31px;
+                }
+            }
+        }
 
-.addons {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    margin: var(--gap-0);
+        @mixin action_primary_large;
 
-    &:first-child {
-        margin-right: 6px;
+        &:not(.text).iconOnly {
+            min-width: var(--size-xl-height);
+        }
     }
 
-    &:last-child {
-        margin-left: 6px;
-    }
+    /* Addons */
 
-    &:only-child {
+    .addons {
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
         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);
-    }
-}
+        &:first-child {
+            margin-right: 6px;
+        }
 
-.size-64,
-.size-72 {
-    & .addons:first-child {
-        margin-right: var(--gap-12);
-    }
+        &:last-child {
+            margin-left: 6px;
+        }
 
-    & .addons:last-child {
-        margin-left: var(--gap-12);
+        &:only-child {
+            margin: var(--gap-0);
+        }
     }
 
-    & .addons:only-child {
-        margin: var(--gap-0);
+    &.size-48,
+    &.size-56 {
+        & .addons {
+            &:first-child {
+                margin-right: var(--gap-8);
+            }
+            &:last-child {
+                margin-left: var(--gap-8);
+            }
+            &:only-child {
+                margin: var(--gap-0);
+            }
+        }
+    }
+
+    &.size-64,
+    &.size-72 {
+        & .addons {
+            &:first-child {
+                margin-right: var(--gap-12);
+            }
+            &:last-child {
+                margin-left: var(--gap-12);
+            }
+            &:only-child {
+                margin: var(--gap-0);
+            }
+        }
     }
-}
 
-.iconOnly {
-    padding: var(--gap-0);
-}
+    /* Disabled */
 
-/* Block */
+    @mixin disabled {
+        cursor: var(--disabled-cursor);
 
-.block {
-    display: flex;
-    width: 100%;
-}
-
-/* Nowrap */
-
-.nowrap {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.rounded {
-    border-radius: var(--border-radius-pill);
+        & * {
+            pointer-events: none;
+        }
+    }
 }
diff --git a/packages/button/src/components/base-button/inverted.module.css b/packages/button/src/components/base-button/inverted.module.css
index 2a72630e3f..db6886a490 100644
--- a/packages/button/src/components/base-button/inverted.module.css
+++ b/packages/button/src/components/base-button/inverted.module.css
@@ -1,187 +1,187 @@
 @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;
 
-    @media (hover: hover) {
-        &:hover {
+        @mixin hover {
             background-color: var(--button-inverted-accent-hover-bg-color);
         }
-    }
 
-    &:active {
-        background-color: var(--button-inverted-accent-active-bg-color);
-    }
+        &:active {
+            background-color: var(--button-inverted-accent-active-bg-color);
+        }
 
-    & > .loader {
-        color: var(--button-spinner-inverted-static-color);
+        & > .loader {
+            color: var(--button-spinner-inverted-static-color);
+        }
     }
-}
 
-.primary {
-    border: 1px solid transparent;
+    &.primary {
+        border: var(--button-border-width) solid transparent;
 
-    & .hint {
-        color: var(--button-inverted-primary-hint-color);
+        & .hint {
+            color: var(--button-inverted-primary-hint-color);
+        }
     }
-}
 
-.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);
+        }
 
-    & .hint {
-        color: var(--button-inverted-secondary-hint-color);
+        & .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);
+
+        @media (hover: hover) {
+            &: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);
-    }
+        &:active {
+            background-color: var(--button-inverted-outlined-active-bg-color);
+        }
 
-    & > .loader {
-        color: var(--button-spinner-inverted-color);
-    }
+        & > .loader {
+            color: var(--button-spinner-inverted-color);
+        }
 
-    & .hint {
-        color: var(--button-inverted-outlined-hint-color);
+        & .hint {
+            color: var(--button-inverted-outlined-hint-color);
+        }
     }
-}
 
-.tertiary {
-    color: var(--button-inverted-tertiary-color);
-    background-color: var(--button-inverted-tertiary-base-bg-color);
-    border: 1px solid var(--button-inverted-tertiary-base-border-color);
+    &.tertiary {
+        color: var(--button-inverted-tertiary-color);
+        background-color: var(--button-inverted-tertiary-base-bg-color);
+        border: var(--button-border-width) solid var(--button-inverted-tertiary-base-border-color);
+
+        @media (hover: hover) {
+            &:hover {
+                background-color: var(--button-inverted-tertiary-hover-bg-color);
+                border-color: var(--button-inverted-tertiary-hover-border-color);
+            }
+        }
 
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--button-inverted-tertiary-hover-bg-color);
-            border-color: var(--button-inverted-tertiary-hover-border-color);
+        &:active {
+            background-color: var(--button-inverted-tertiary-active-bg-color);
         }
-    }
 
-    &:active {
-        background-color: var(--button-inverted-tertiary-active-bg-color);
-    }
+        & > .loader {
+            color: var(--button-spinner-inverted-color);
+        }
 
-    & > .loader {
-        color: var(--button-spinner-inverted-color);
+        & .hint {
+            color: var(--button-inverted-tertiary-hint-color);
+        }
     }
 
-    & .hint {
-        color: var(--button-inverted-tertiary-hint-color);
-    }
-}
-
-.transparent {
-    color: var(--button-inverted-transparent-base-color);
-    background-color: transparent;
-    border: 1px solid transparent;
+    &.transparent {
+        color: var(--button-inverted-transparent-base-color);
+        background-color: transparent;
+        border: var(--button-border-width) solid transparent;
 
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--button-inverted-transparent-hover-bg-color);
+        @media (hover: hover) {
+            &:hover {
+                background-color: var(--button-inverted-transparent-hover-bg-color);
+            }
         }
-    }
 
-    &:active {
-        background-color: var(--button-inverted-transparent-active-bg-color);
-    }
+        &:active {
+            background-color: var(--button-inverted-transparent-active-bg-color);
+        }
 
-    & > .loader {
-        color: var(--button-spinner-inverted-color);
-    }
+        & > .loader {
+            color: var(--button-spinner-inverted-color);
+        }
 
-    & .hint {
-        color: var(--button-inverted-transparent-base-hint-color);
+        & .hint {
+            color: var(--button-inverted-transparent-base-hint-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);
+        @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);
+        }
 
-    & .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);
+            }
         }
-    }
 
-    &.tertiary {
-        background-color: var(--button-inverted-tertiary-disabled-bg-color);
+        &.tertiary {
+            background-color: var(--button-inverted-tertiary-disabled-bg-color);
 
-        &.loading {
-            color: var(--button-inverted-tertiary-color);
+            &.loading {
+                color: var(--button-inverted-tertiary-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
index 0392dc41a0..63b3dc3572 100644
--- a/packages/button/src/components/button-component/Component.tsx
+++ b/packages/button/src/components/button-component/Component.tsx
@@ -1,16 +1,21 @@
 import React, { forwardRef } from 'react';
 import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
 
 import { type ButtonComponentProps } from '../../typings';
 
+import styles from './index.module.css';
+
 export const ButtonComponent = forwardRef<HTMLElement, ButtonComponentProps>(
-    ({ children, href, type, disabled, rel, ...restProps }, ref) => {
+    ({ children, href, type = 'button', disabled = false, rel, className, ...restProps }, ref) => {
         const isAnchor = Boolean(href);
         const Tag = isAnchor ? 'a' : 'button';
 
         return (
             <Tag
                 {...restProps}
+                className={cn(className, styles.component)}
+                // className={className}
                 ref={mergeRefs([ref])}
                 rel={
                     rel ??
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..7cb28f408b
--- /dev/null
+++ b/packages/button/src/components/button-component/index.module.css
@@ -0,0 +1,15 @@
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
+@import '../../vars.css';
+
+.component {
+    margin: var(--gap-0);
+    padding: var(--gap-0);
+    text-decoration: none;
+    outline: none;
+    box-shadow: none;
+    user-select: none;
+    appearance: none;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+}
diff --git a/packages/button/src/desktop/default.desktop.module.css b/packages/button/src/desktop/default.desktop.module.css
index 6c6391ad54..85383040a9 100644
--- a/packages/button/src/desktop/default.desktop.module.css
+++ b/packages/button/src/desktop/default.desktop.module.css
@@ -1,73 +1,75 @@
 @import '../vars.css';
 
-.primary {
-    color: var(--button-primary-color);
-    background-color: var(--button-primary-base-bg-color);
+.component {
+    &.primary {
+        color: var(--button-primary-color);
+        background-color: var(--button-primary-base-bg-color);
 
-    @media (hover: hover) {
-        &: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);
+        }
 
-    & > .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);
-    }
+        &: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 {
+        &: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);
+        }
 
-    &.tertiary {
-        color: var(--button-tertiary-disabled-color);
-        border-color: var(--button-tertiary-disabled-border-color);
-    }
+        &.tertiary {
+            color: var(--button-tertiary-disabled-color);
+            border-color: var(--button-tertiary-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..5f5ac85513 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 {
+    &.size-32 {
+        border-radius: var(--button-xxs-size-border-radius);
+    }
 
-.size-40 {
-    border-radius: var(--button-xs-size-border-radius);
-}
+    &.size-40 {
+        border-radius: var(--button-xs-size-border-radius);
+    }
 
-.size-48 {
-    border-radius: var(--button-s-size-border-radius);
-}
+    &.size-48 {
+        border-radius: var(--button-s-size-border-radius);
+    }
 
-.size-56 {
-    border-radius: var(--button-m-size-border-radius);
-}
+    &.size-56 {
+        border-radius: var(--button-m-size-border-radius);
+    }
 
-.size-64 {
-    border-radius: var(--button-l-size-border-radius);
-}
+    &.size-64 {
+        border-radius: var(--button-l-size-border-radius);
+    }
 
-.size-72 {
-    border-radius: var(--button-xl-size-border-radius);
+    &.size-72 {
+        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 afbc74b693..81c6f5d455 100644
--- a/packages/button/src/desktop/inverted.desktop.module.css
+++ b/packages/button/src/desktop/inverted.desktop.module.css
@@ -1,73 +1,73 @@
 @import '../vars.css';
 
-.primary {
-    color: var(--button-inverted-primary-color);
-    background-color: var(--button-inverted-primary-base-bg-color);
+.component {
+    &.primary {
+        color: var(--button-inverted-primary-color);
+        background-color: var(--button-inverted-primary-base-bg-color);
 
-    @media (hover: hover) {
-        &:hover {
+        @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);
+        & > .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);
-    }
+        &: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 {
+        &: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);
+        }
 
-    &.tertiary {
-        color: var(--button-inverted-tertiary-disabled-color);
-        border-color: var(--button-inverted-tertiary-disabled-border-color);
-    }
+        &.tertiary {
+            color: var(--button-inverted-tertiary-disabled-color);
+            border-color: var(--button-inverted-tertiary-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/default.mobile.module.css b/packages/button/src/mobile/default.mobile.module.css
index 99556faabc..bb7fb36d16 100644
--- a/packages/button/src/mobile/default.mobile.module.css
+++ b/packages/button/src/mobile/default.mobile.module.css
@@ -1,69 +1,69 @@
 @import '../vars.css';
 
-.primary {
-    color: var(--button-primary-mobile-color);
-    background-color: var(--button-primary-mobile-base-bg-color);
+.component {
+    &.primary {
+        color: var(--button-primary-mobile-color);
+        background-color: var(--button-primary-mobile-base-bg-color);
 
-    @media (hover: hover) {
-        &:hover {
+        @mixin 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);
+        }
     }
-}
 
-.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);
+        &:active {
+            background-color: var(--button-secondary-mobile-active-bg-color);
+        }
     }
-}
 
-.text {
-    &:active {
-        color: var(--button-text-mobile-active-color);
+    &.text {
+        &: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);
+        }
 
-    &.tertiary {
-        color: var(--button-tertiary-mobile-disabled-color);
-        border-color: var(--button-tertiary-mobile-disabled-border-color);
-    }
+        &.tertiary {
+            color: var(--button-tertiary-mobile-disabled-color);
+            border-color: var(--button-tertiary-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 4f92726249..188ada80c6 100644
--- a/packages/button/src/mobile/inverted.mobile.module.css
+++ b/packages/button/src/mobile/inverted.mobile.module.css
@@ -1,69 +1,71 @@
 @import '../vars.css';
 
-.primary {
-    color: var(--button-inverted-primary-mobile-color);
-    background-color: var(--button-inverted-primary-mobile-base-bg-color);
+.component {
+    &.primary {
+        color: var(--button-inverted-primary-mobile-color);
+        background-color: var(--button-inverted-primary-mobile-base-bg-color);
 
-    @media (hover: hover) {
-        &: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);
+        }
     }
-}
 
-.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);
+        &:active {
+            background-color: var(--button-inverted-secondary-mobile-active-bg-color);
+        }
     }
-}
 
-.text {
-    &:active {
-        color: var(--button-inverted-text-mobile-active-color);
+    &.text {
+        &: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);
+        }
 
-    &.tertiary {
-        color: var(--button-inverted-tertiary-mobile-disabled-color);
-        border-color: var(--button-inverted-tertiary-mobile-disabled-border-color);
-    }
+        &.tertiary {
+            color: var(--button-inverted-tertiary-mobile-disabled-color);
+            border-color: var(--button-inverted-tertiary-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..b5171d7020 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 {
+    &.size-32 {
+        border-radius: var(--button-xxs-size-mobile-border-radius);
+    }
 
-.size-40 {
-    border-radius: var(--button-xs-size-mobile-border-radius);
-}
+    &.size-40 {
+        border-radius: var(--button-xs-size-mobile-border-radius);
+    }
 
-.size-48 {
-    border-radius: var(--button-s-size-mobile-border-radius);
-}
+    &.size-48 {
+        border-radius: var(--button-s-size-mobile-border-radius);
+    }
 
-.size-56 {
-    border-radius: var(--button-m-size-mobile-border-radius);
-}
+    &.size-56 {
+        border-radius: var(--button-m-size-mobile-border-radius);
+    }
 
-.size-64 {
-    border-radius: var(--button-l-size-mobile-border-radius);
-}
+    &.size-64 {
+        border-radius: var(--button-l-size-mobile-border-radius);
+    }
 
-.size-72 {
-    border-radius: var(--button-xl-size-mobile-border-radius);
+    &.size-72 {
+        border-radius: var(--button-xl-size-mobile-border-radius);
+    }
 }
diff --git a/packages/button/src/vars.css b/packages/button/src/vars.css
index 12883958a0..2f6c8bf26b 100644
--- a/packages/button/src/vars.css
+++ b/packages/button/src/vars.css
@@ -4,6 +4,7 @@
     /* misc */
     --button-font-family: var(--font-family);
     --button-font-weight: 500;
+    --button-border-width: 1px;
 
     /* border-radius desktop */
     --button-xxs-size-border-radius: var(--border-radius-6);
diff --git a/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap b/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap
index 3421740258..bf6fa81b54 100644
--- a/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap
@@ -51,7 +51,7 @@ 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 border-32"
+                class="component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
                 data-test-id="period-slider-btn-previous-day"
                 type="button"
               >
@@ -84,7 +84,7 @@ 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 border-32"
+                class="component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
                 data-test-id="period-slider-btn-next-day"
                 type="button"
               >
@@ -169,7 +169,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -193,7 +193,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -217,7 +217,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -241,7 +241,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -267,7 +267,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -291,7 +291,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -315,7 +315,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -339,7 +339,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -363,7 +363,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -387,7 +387,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -411,7 +411,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -437,7 +437,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -461,7 +461,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -485,7 +485,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -509,7 +509,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -533,7 +533,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -557,7 +557,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -581,7 +581,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -607,7 +607,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -631,7 +631,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -655,7 +655,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -679,7 +679,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -703,7 +703,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -727,7 +727,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -751,7 +751,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -777,7 +777,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -801,7 +801,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -825,7 +825,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -849,7 +849,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -873,7 +873,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -897,7 +897,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -969,7 +969,7 @@ 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 border-32"
+                class="component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
                 data-test-id="period-slider-btn-previous-day"
                 type="button"
               >
@@ -1002,7 +1002,7 @@ 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 border-32"
+                class="component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
                 data-test-id="period-slider-btn-next-day"
                 type="button"
               >
@@ -1090,7 +1090,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1116,7 +1116,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1140,7 +1140,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1164,7 +1164,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1188,7 +1188,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1212,7 +1212,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1236,7 +1236,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1260,7 +1260,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1286,7 +1286,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1310,7 +1310,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1334,7 +1334,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1358,7 +1358,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1382,7 +1382,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1406,7 +1406,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1430,7 +1430,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1456,7 +1456,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1480,7 +1480,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1504,7 +1504,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1528,7 +1528,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1552,7 +1552,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1576,7 +1576,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1600,7 +1600,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1626,7 +1626,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1650,7 +1650,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1674,7 +1674,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1698,7 +1698,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1722,7 +1722,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1746,7 +1746,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1770,7 +1770,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1796,7 +1796,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
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..a69979df8a 100644
--- a/packages/calendar-with-skeleton/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/calendar-with-skeleton/src/__snapshots__/Component.test.tsx.snap
@@ -18,7 +18,7 @@ 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 text text text size-40 hug size-40 button filled button month component"
             type="button"
           >
             <span
@@ -47,7 +47,7 @@ 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 text text text size-40 hug size-40 button filled button year component"
             type="button"
           >
             <span
@@ -138,7 +138,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -165,7 +165,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -190,7 +190,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -215,7 +215,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -240,7 +240,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -265,7 +265,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -290,7 +290,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -315,7 +315,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -342,7 +342,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -367,7 +367,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -392,7 +392,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -417,7 +417,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -442,7 +442,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -467,7 +467,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -492,7 +492,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -519,7 +519,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -544,7 +544,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -569,7 +569,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -594,7 +594,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -619,7 +619,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -644,7 +644,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -669,7 +669,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -696,7 +696,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -721,7 +721,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -746,7 +746,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -771,7 +771,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -796,7 +796,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -821,7 +821,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -846,7 +846,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -873,7 +873,7 @@ 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 text text text size-40 hug size-40 day rounded selected component"
                   type="button"
                 >
                   <span
diff --git a/packages/calendar/src/__snapshots__/Component.test.tsx.snap b/packages/calendar/src/__snapshots__/Component.test.tsx.snap
index 4a5132d141..a055003a0e 100644
--- a/packages/calendar/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/calendar/src/__snapshots__/Component.test.tsx.snap
@@ -15,7 +15,7 @@ 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 text text text size-40 hug size-40 button filled button month component"
           type="button"
         >
           <span
@@ -44,7 +44,7 @@ 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 text text text size-40 hug size-40 button filled button year component"
           type="button"
         >
           <span
@@ -135,7 +135,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -162,7 +162,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -187,7 +187,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -212,7 +212,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -237,7 +237,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -262,7 +262,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -287,7 +287,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -312,7 +312,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -339,7 +339,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -364,7 +364,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -389,7 +389,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -414,7 +414,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -439,7 +439,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -464,7 +464,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -489,7 +489,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -516,7 +516,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -541,7 +541,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -566,7 +566,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -591,7 +591,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -616,7 +616,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -641,7 +641,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -666,7 +666,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -693,7 +693,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -718,7 +718,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -743,7 +743,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -768,7 +768,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -793,7 +793,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -818,7 +818,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -843,7 +843,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -870,7 +870,7 @@ 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 text text text size-40 hug size-40 day rounded selected component"
                 type="button"
               >
                 <span
@@ -916,7 +916,7 @@ 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 text text text size-40 hug size-40 button filled button month component"
           type="button"
         >
           <span
@@ -945,7 +945,7 @@ 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 text text text size-40 hug size-40 button filled button year component"
           type="button"
         >
           <span
@@ -983,7 +983,7 @@ 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 text text text size-40 hug size-40 button default button component"
           data-date="1577836800000"
           tabindex="-1"
           type="button"
@@ -996,7 +996,7 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
         </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 text text text size-40 hug size-40 button default button component"
           data-date="1580515200000"
           tabindex="-1"
           type="button"
@@ -1009,7 +1009,7 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
         </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 text text text size-40 hug size-40 button default button component"
           data-date="1583020800000"
           tabindex="-1"
           type="button"
@@ -1022,7 +1022,7 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
         </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 text text text size-40 hug size-40 button default button component"
           data-date="1585699200000"
           tabindex="-1"
           type="button"
@@ -1035,7 +1035,7 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
         </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 text text text size-40 hug size-40 button default button component"
           data-date="1588291200000"
           tabindex="-1"
           type="button"
@@ -1048,7 +1048,7 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
         </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 text text text size-40 hug size-40 button default button component"
           data-date="1590969600000"
           tabindex="-1"
           type="button"
@@ -1061,7 +1061,7 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
         </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 text text text size-40 hug size-40 button default button component"
           data-date="1593561600000"
           tabindex="-1"
           type="button"
@@ -1074,7 +1074,7 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
         </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 text text text size-40 hug size-40 button default button component"
           data-date="1596240000000"
           tabindex="-1"
           type="button"
@@ -1087,7 +1087,7 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
         </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 text text text size-40 hug size-40 button default button component"
           data-date="1598918400000"
           tabindex="-1"
           type="button"
@@ -1100,7 +1100,7 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
         </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 text text text size-40 hug size-40 button default button component"
           data-date="1601510400000"
           tabindex="-1"
           type="button"
@@ -1113,7 +1113,7 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
         </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 text text text size-40 hug size-40 button selected button component"
           data-date="1604188800000"
           tabindex="0"
           type="button"
@@ -1126,7 +1126,7 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
         </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 text text text size-40 hug size-40 button default button component"
           data-date="1606780800000"
           tabindex="-1"
           type="button"
@@ -1158,7 +1158,7 @@ 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 text text text size-40 hug size-40 button filled button month component"
           type="button"
         >
           <span
@@ -1187,7 +1187,7 @@ 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 text text text size-40 hug size-40 button filled button year component"
           type="button"
         >
           <span
@@ -1228,7 +1228,7 @@ 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 text text text size-40 hug size-40 button selected button component"
             data-date="1577836800000"
             tabindex="0"
             type="button"
@@ -1241,7 +1241,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="1546300800000"
             tabindex="-1"
             type="button"
@@ -1254,7 +1254,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="1514764800000"
             tabindex="-1"
             type="button"
@@ -1267,7 +1267,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="1483228800000"
             tabindex="-1"
             type="button"
@@ -1280,7 +1280,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="1451606400000"
             tabindex="-1"
             type="button"
@@ -1293,7 +1293,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="1420070400000"
             tabindex="-1"
             type="button"
@@ -1306,7 +1306,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="1388534400000"
             tabindex="-1"
             type="button"
@@ -1319,7 +1319,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="1356998400000"
             tabindex="-1"
             type="button"
@@ -1332,7 +1332,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="1325376000000"
             tabindex="-1"
             type="button"
@@ -1345,7 +1345,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="1293840000000"
             tabindex="-1"
             type="button"
@@ -1358,7 +1358,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="1262304000000"
             tabindex="-1"
             type="button"
@@ -1371,7 +1371,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="1230768000000"
             tabindex="-1"
             type="button"
@@ -1384,7 +1384,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="1199145600000"
             tabindex="-1"
             type="button"
@@ -1397,7 +1397,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="1167609600000"
             tabindex="-1"
             type="button"
@@ -1410,7 +1410,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="1136073600000"
             tabindex="-1"
             type="button"
@@ -1423,7 +1423,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="1104537600000"
             tabindex="-1"
             type="button"
@@ -1436,7 +1436,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="1072915200000"
             tabindex="-1"
             type="button"
@@ -1449,7 +1449,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="1041379200000"
             tabindex="-1"
             type="button"
@@ -1462,7 +1462,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="1009843200000"
             tabindex="-1"
             type="button"
@@ -1475,7 +1475,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="978307200000"
             tabindex="-1"
             type="button"
@@ -1488,7 +1488,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="946684800000"
             tabindex="-1"
             type="button"
@@ -1501,7 +1501,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="915148800000"
             tabindex="-1"
             type="button"
@@ -1514,7 +1514,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="883612800000"
             tabindex="-1"
             type="button"
@@ -1527,7 +1527,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="852076800000"
             tabindex="-1"
             type="button"
@@ -1540,7 +1540,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="820454400000"
             tabindex="-1"
             type="button"
@@ -1553,7 +1553,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="788918400000"
             tabindex="-1"
             type="button"
@@ -1566,7 +1566,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="757382400000"
             tabindex="-1"
             type="button"
@@ -1579,7 +1579,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="725846400000"
             tabindex="-1"
             type="button"
@@ -1592,7 +1592,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="694224000000"
             tabindex="-1"
             type="button"
@@ -1605,7 +1605,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="662688000000"
             tabindex="-1"
             type="button"
@@ -1618,7 +1618,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="631152000000"
             tabindex="-1"
             type="button"
@@ -1631,7 +1631,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="599616000000"
             tabindex="-1"
             type="button"
@@ -1644,7 +1644,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="567993600000"
             tabindex="-1"
             type="button"
@@ -1657,7 +1657,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="536457600000"
             tabindex="-1"
             type="button"
@@ -1670,7 +1670,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="504921600000"
             tabindex="-1"
             type="button"
@@ -1683,7 +1683,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="473385600000"
             tabindex="-1"
             type="button"
@@ -1696,7 +1696,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="441763200000"
             tabindex="-1"
             type="button"
@@ -1709,7 +1709,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="410227200000"
             tabindex="-1"
             type="button"
@@ -1722,7 +1722,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="378691200000"
             tabindex="-1"
             type="button"
@@ -1735,7 +1735,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="347155200000"
             tabindex="-1"
             type="button"
@@ -1748,7 +1748,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="315532800000"
             tabindex="-1"
             type="button"
@@ -1761,7 +1761,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="283996800000"
             tabindex="-1"
             type="button"
@@ -1774,7 +1774,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="252460800000"
             tabindex="-1"
             type="button"
@@ -1787,7 +1787,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="220924800000"
             tabindex="-1"
             type="button"
@@ -1800,7 +1800,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="189302400000"
             tabindex="-1"
             type="button"
@@ -1813,7 +1813,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="157766400000"
             tabindex="-1"
             type="button"
@@ -1826,7 +1826,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="126230400000"
             tabindex="-1"
             type="button"
@@ -1839,7 +1839,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="94694400000"
             tabindex="-1"
             type="button"
@@ -1852,7 +1852,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="63072000000"
             tabindex="-1"
             type="button"
@@ -1865,7 +1865,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="31536000000"
             tabindex="-1"
             type="button"
@@ -1878,7 +1878,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="0"
             tabindex="-1"
             type="button"
@@ -1891,7 +1891,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-31536000000"
             tabindex="-1"
             type="button"
@@ -1904,7 +1904,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-63158400000"
             tabindex="-1"
             type="button"
@@ -1917,7 +1917,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-94694400000"
             tabindex="-1"
             type="button"
@@ -1930,7 +1930,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-126230400000"
             tabindex="-1"
             type="button"
@@ -1943,7 +1943,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-157766400000"
             tabindex="-1"
             type="button"
@@ -1956,7 +1956,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-189388800000"
             tabindex="-1"
             type="button"
@@ -1969,7 +1969,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-220924800000"
             tabindex="-1"
             type="button"
@@ -1982,7 +1982,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-252460800000"
             tabindex="-1"
             type="button"
@@ -1995,7 +1995,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-283996800000"
             tabindex="-1"
             type="button"
@@ -2008,7 +2008,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-315619200000"
             tabindex="-1"
             type="button"
@@ -2021,7 +2021,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-347155200000"
             tabindex="-1"
             type="button"
@@ -2034,7 +2034,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-378691200000"
             tabindex="-1"
             type="button"
@@ -2047,7 +2047,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-410227200000"
             tabindex="-1"
             type="button"
@@ -2060,7 +2060,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-441849600000"
             tabindex="-1"
             type="button"
@@ -2073,7 +2073,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-473385600000"
             tabindex="-1"
             type="button"
@@ -2086,7 +2086,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-504921600000"
             tabindex="-1"
             type="button"
@@ -2099,7 +2099,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-536457600000"
             tabindex="-1"
             type="button"
@@ -2112,7 +2112,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-568080000000"
             tabindex="-1"
             type="button"
@@ -2125,7 +2125,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-599616000000"
             tabindex="-1"
             type="button"
@@ -2138,7 +2138,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-631152000000"
             tabindex="-1"
             type="button"
@@ -2151,7 +2151,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-662688000000"
             tabindex="-1"
             type="button"
@@ -2164,7 +2164,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-694310400000"
             tabindex="-1"
             type="button"
@@ -2177,7 +2177,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-725846400000"
             tabindex="-1"
             type="button"
@@ -2190,7 +2190,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-757382400000"
             tabindex="-1"
             type="button"
@@ -2203,7 +2203,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-788918400000"
             tabindex="-1"
             type="button"
@@ -2216,7 +2216,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-820540800000"
             tabindex="-1"
             type="button"
@@ -2229,7 +2229,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-852076800000"
             tabindex="-1"
             type="button"
@@ -2242,7 +2242,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-883612800000"
             tabindex="-1"
             type="button"
@@ -2255,7 +2255,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-915148800000"
             tabindex="-1"
             type="button"
@@ -2268,7 +2268,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-946771200000"
             tabindex="-1"
             type="button"
@@ -2281,7 +2281,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-978307200000"
             tabindex="-1"
             type="button"
@@ -2294,7 +2294,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-1009843200000"
             tabindex="-1"
             type="button"
@@ -2307,7 +2307,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-1041379200000"
             tabindex="-1"
             type="button"
@@ -2320,7 +2320,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-1073001600000"
             tabindex="-1"
             type="button"
@@ -2333,7 +2333,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-1104537600000"
             tabindex="-1"
             type="button"
@@ -2346,7 +2346,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-1136073600000"
             tabindex="-1"
             type="button"
@@ -2359,7 +2359,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-1167609600000"
             tabindex="-1"
             type="button"
@@ -2372,7 +2372,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-1199232000000"
             tabindex="-1"
             type="button"
@@ -2385,7 +2385,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-1230768000000"
             tabindex="-1"
             type="button"
@@ -2398,7 +2398,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-1262304000000"
             tabindex="-1"
             type="button"
@@ -2411,7 +2411,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-1293840000000"
             tabindex="-1"
             type="button"
@@ -2424,7 +2424,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-1325462400000"
             tabindex="-1"
             type="button"
@@ -2437,7 +2437,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-1356998400000"
             tabindex="-1"
             type="button"
@@ -2450,7 +2450,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-1388534400000"
             tabindex="-1"
             type="button"
@@ -2463,7 +2463,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </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 text text text size-40 hug size-40 button default button component"
             data-date="-1420070400000"
             tabindex="-1"
             type="button"
@@ -2496,7 +2496,7 @@ 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 text text text size-40 hug size-40 button filled button month component"
           type="button"
         >
           <span
@@ -2525,7 +2525,7 @@ 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 text text text size-40 hug size-40 button filled button year component"
           type="button"
         >
           <span
@@ -2616,7 +2616,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2643,7 +2643,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2668,7 +2668,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2693,7 +2693,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2718,7 +2718,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2743,7 +2743,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2768,7 +2768,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2793,7 +2793,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2820,7 +2820,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2845,7 +2845,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2870,7 +2870,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2895,7 +2895,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2920,7 +2920,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2945,7 +2945,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2970,7 +2970,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2997,7 +2997,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3022,7 +3022,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3047,7 +3047,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3072,7 +3072,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3097,7 +3097,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3122,7 +3122,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3147,7 +3147,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3174,7 +3174,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3199,7 +3199,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3224,7 +3224,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3249,7 +3249,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3274,7 +3274,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3299,7 +3299,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3324,7 +3324,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3351,7 +3351,7 @@ 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 text text text size-40 hug size-40 day rounded selected component"
                 type="button"
               >
                 <span
@@ -3399,7 +3399,7 @@ 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 border-32"
+          class="component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
           data-test-id="period-slider-btn-previous-day"
           type="button"
         >
@@ -3432,7 +3432,7 @@ 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 border-32"
+          class="component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
           data-test-id="period-slider-btn-next-day"
           type="button"
         >
@@ -3521,7 +3521,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3548,7 +3548,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3573,7 +3573,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3598,7 +3598,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3623,7 +3623,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3648,7 +3648,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3673,7 +3673,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3698,7 +3698,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3725,7 +3725,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3750,7 +3750,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3775,7 +3775,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3800,7 +3800,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3825,7 +3825,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3850,7 +3850,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3875,7 +3875,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3902,7 +3902,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3927,7 +3927,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3952,7 +3952,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3977,7 +3977,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4002,7 +4002,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4027,7 +4027,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4052,7 +4052,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4079,7 +4079,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4104,7 +4104,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4129,7 +4129,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4154,7 +4154,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4179,7 +4179,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4204,7 +4204,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4229,7 +4229,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4256,7 +4256,7 @@ 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 text text text size-40 hug size-40 day rounded selected component"
                 type="button"
               >
                 <span
@@ -4302,7 +4302,7 @@ 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 text text text size-40 hug size-40 button filled button month component"
           type="button"
         >
           <span
@@ -4331,7 +4331,7 @@ 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 text text text size-40 hug size-40 button filled button year component"
           type="button"
         >
           <span
@@ -4422,7 +4422,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4449,7 +4449,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4474,7 +4474,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4499,7 +4499,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4524,7 +4524,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4549,7 +4549,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4574,7 +4574,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4599,7 +4599,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4626,7 +4626,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4651,7 +4651,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4676,7 +4676,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4701,7 +4701,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4726,7 +4726,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4751,7 +4751,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4776,7 +4776,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4803,7 +4803,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4828,7 +4828,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4853,7 +4853,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4878,7 +4878,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4903,7 +4903,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4928,7 +4928,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4953,7 +4953,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4980,7 +4980,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -5005,7 +5005,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -5030,7 +5030,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -5055,7 +5055,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -5080,7 +5080,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -5105,7 +5105,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -5130,7 +5130,7 @@ 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 text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -5157,7 +5157,7 @@ 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 text text text size-40 hug size-40 day rounded selected component"
                 type="button"
               >
                 <span
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 bfdf33e6cf..5a9870b242 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,7 +9,7 @@ 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 border-32"
+      class="component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
       data-test-id="period-slider-btn-previous-day"
       disabled=""
       type="button"
@@ -43,7 +43,7 @@ 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 border-32"
+      class="component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
       data-test-id="period-slider-btn-next-day"
       disabled=""
       type="button"
@@ -83,7 +83,7 @@ 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 border-32"
+      class="component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
       data-test-id="period-slider-btn-previous-day"
       disabled=""
       type="button"
@@ -117,7 +117,7 @@ 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 border-32"
+      class="component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
       data-test-id="period-slider-btn-next-day"
       disabled=""
       type="button"
diff --git a/packages/confirmation-v1/src/__snapshots__/Component.test.tsx.snap b/packages/confirmation-v1/src/__snapshots__/Component.test.tsx.snap
index 17ec893ba2..1c2eaa191a 100644
--- a/packages/confirmation-v1/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/confirmation-v1/src/__snapshots__/Component.test.tsx.snap
@@ -136,7 +136,7 @@ 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 secondary secondary secondary size-40 hug size-40 component"
         type="button"
       >
         <span
diff --git a/packages/confirmation/src/__snapshots__/Component.test.tsx.snap b/packages/confirmation/src/__snapshots__/Component.test.tsx.snap
index a2a438df6b..c565c0cb47 100644
--- a/packages/confirmation/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/confirmation/src/__snapshots__/Component.test.tsx.snap
@@ -515,7 +515,7 @@ 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 secondary secondary secondary size-48 hug size-48 button component"
         type="button"
       >
         <span
@@ -595,7 +595,7 @@ 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 secondary secondary secondary size-48 hug size-48 hintButton component"
         type="button"
       >
         <span
@@ -676,7 +676,7 @@ 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 secondary secondary secondary size-48 hug size-48 button component"
         type="button"
       >
         <span
diff --git a/packages/custom-button/src/__snapshots__/Component.test.tsx.snap b/packages/custom-button/src/__snapshots__/Component.test.tsx.snap
index 58b301f6be..a73254731b 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 primary primary primary size-56 hug size-56 iconOnly 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 component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
         style="background: rgb(255, 69, 195);"
         type="button"
       >
@@ -1011,7 +1011,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 component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
       style="background: rgb(255, 69, 195);"
       type="button"
     >
@@ -1113,7 +1113,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 component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
         style="background: rgb(255, 69, 195);"
         type="button"
       >
@@ -1157,7 +1157,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 component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
         style="background: rgb(255, 69, 195);"
         type="button"
       >
@@ -1202,7 +1202,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 component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
       style="background: rgb(255, 69, 195);"
       type="button"
     >
@@ -1304,7 +1304,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 component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
         style="background: rgb(255, 69, 195);"
         type="button"
       >
@@ -1348,7 +1348,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 component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
         style="background: rgb(255, 69, 195);"
         type="button"
       >
@@ -1392,7 +1392,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 component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
         style="background: rgb(255, 69, 195);"
         type="button"
       >
@@ -1437,7 +1437,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 component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
       style="background: rgb(255, 69, 195);"
       type="button"
     >
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 975ad66e24..66444a30c7 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 component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border white darkening disableType-default component"
       id="downshift-:r0:-input"
       selectedmultiple=""
       style="background: rgb(255, 69, 195);"
@@ -67,7 +67,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 component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border white darkening disableType-default component"
       id="downshift-:r4:-input"
       selectedmultiple=""
       style="background: rgb(255, 69, 195);"
@@ -123,7 +123,7 @@ exports[`Snapshots tests should display correctly 3`] = `
       aria-controls="downshift-:r8:-menu"
       aria-labelledby="downshift-:r8:-label"
       arrow="[object Object]"
-      class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border white darkening disableType-default"
+      class="component component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border white darkening disableType-default component"
       formcontrolcomponent="[object Object]"
       id="downshift-:r8:-input"
       selectedmultiple=""
@@ -179,7 +179,7 @@ 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 component component component primary primary primary size-56 hug size-56 block iconOnly customButton border white darkening disableType-default component"
       id="downshift-:r3:-input"
       selectedmultiple=""
       style="background: rgb(255, 69, 195);"
@@ -582,7 +582,7 @@ 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 component component component primary primary primary size-56 hug size-56 block iconOnly customButton border white darkening disableType-default component"
       id="downshift-:r7:-input"
       selectedmultiple=""
       style="background: rgb(255, 69, 195);"
@@ -985,7 +985,7 @@ 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 component component component primary primary primary size-56 hug size-56 block iconOnly customButton border white darkening disableType-default component"
       id="downshift-:rb:-input"
       selectedmultiple=""
       style="background: rgb(255, 69, 195);"
@@ -1394,7 +1394,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 component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border black darkening disableType-default component"
           id="downshift-:r2:-input"
           selectedmultiple=""
           style="background: rgb(255, 69, 195);"
@@ -1447,7 +1447,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 component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border black darkening disableType-default component"
         id="downshift-:r2:-input"
         selectedmultiple=""
         style="background: rgb(255, 69, 195);"
@@ -1560,7 +1560,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 component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border black darkening disableType-default component"
           id="downshift-:r6:-input"
           selectedmultiple=""
           style="background: rgb(255, 69, 195);"
@@ -1613,7 +1613,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 component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border black darkening disableType-default component"
         id="downshift-:r6:-input"
         selectedmultiple=""
         style="background: rgb(255, 69, 195);"
@@ -1727,7 +1727,7 @@ exports[`Snapshots tests should render black color content 3`] = `
           aria-controls="downshift-:ra:-menu"
           aria-labelledby="downshift-:ra:-label"
           arrow="[object Object]"
-          class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border black darkening disableType-default"
+          class="component component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border black darkening disableType-default component"
           formcontrolcomponent="[object Object]"
           id="downshift-:ra:-input"
           selectedmultiple=""
@@ -1782,7 +1782,7 @@ exports[`Snapshots tests should render black color content 3`] = `
         aria-controls="downshift-:ra:-menu"
         aria-labelledby="downshift-:ra:-label"
         arrow="[object Object]"
-        class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border black darkening disableType-default"
+        class="component component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border black darkening disableType-default component"
         formcontrolcomponent="[object Object]"
         id="downshift-:ra:-input"
         selectedmultiple=""
@@ -1896,7 +1896,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 component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border white darkening disableType-default component"
           id="downshift-:r1:-input"
           selectedmultiple=""
           style="background: rgb(0, 255, 0);"
@@ -1949,7 +1949,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 component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border white darkening disableType-default component"
         id="downshift-:r1:-input"
         selectedmultiple=""
         style="background: rgb(0, 255, 0);"
@@ -2062,7 +2062,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 component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border white darkening disableType-default component"
           id="downshift-:r5:-input"
           selectedmultiple=""
           style="background: rgb(0, 255, 0);"
@@ -2115,7 +2115,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 component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border white darkening disableType-default component"
         id="downshift-:r5:-input"
         selectedmultiple=""
         style="background: rgb(0, 255, 0);"
@@ -2229,7 +2229,7 @@ exports[`Snapshots tests should render custom background color 3`] = `
           aria-controls="downshift-:r9:-menu"
           aria-labelledby="downshift-:r9:-label"
           arrow="[object Object]"
-          class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border white darkening disableType-default"
+          class="component component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border white darkening disableType-default component"
           formcontrolcomponent="[object Object]"
           id="downshift-:r9:-input"
           selectedmultiple=""
@@ -2284,7 +2284,7 @@ exports[`Snapshots tests should render custom background color 3`] = `
         aria-controls="downshift-:r9:-menu"
         aria-labelledby="downshift-:r9:-label"
         arrow="[object Object]"
-        class="component primary size-56 hug size-56 component primary component primary block withRightAddons customButton border white darkening disableType-default"
+        class="component component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border white darkening disableType-default component"
         formcontrolcomponent="[object Object]"
         id="downshift-:r9:-input"
         selectedmultiple=""
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 6ff24cfe22..7008bd6fdd 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,7 +51,7 @@ exports[`FileUploadItemV1 Snapshots tests should match snapshot 1`] = `
         <a
           aria-disabled="false"
           aria-label="скачать"
-          class="component text size-48 hug size-48 component text component text cc-icon-button download primary component border-24"
+          class="component component component component text text text size-48 hug size-48 cc-icon-button download primary component border-24 component"
           download="новое_название_файла"
           href="/link"
         >
@@ -79,7 +79,7 @@ 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 border-24"
+          class="component component component component text text text size-48 hug size-48 cc-icon-button delete primary component border-24 component"
           type="button"
         >
           <span
@@ -154,7 +154,7 @@ exports[`FileUploadItemV1 Snapshots tests should match snapshot 1`] = `
       <a
         aria-disabled="false"
         aria-label="скачать"
-        class="component text size-48 hug size-48 component text component text cc-icon-button download primary component border-24"
+        class="component component component component text text text size-48 hug size-48 cc-icon-button download primary component border-24 component"
         download="новое_название_файла"
         href="/link"
       >
@@ -182,7 +182,7 @@ 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 border-24"
+        class="component component component component text text text size-48 hug size-48 cc-icon-button delete primary component border-24 component"
         type="button"
       >
         <span
diff --git a/packages/icon-button/src/__snapshots__/Component.test.tsx.snap b/packages/icon-button/src/__snapshots__/Component.test.tsx.snap
index 11871ce399..ecdaf6f86e 100644
--- a/packages/icon-button/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/icon-button/src/__snapshots__/Component.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`IconButton Href tests should set \`href\` attribute and be link 1`] = `
     <div>
       <a
         aria-disabled="false"
-        class="component text size-48 hug size-48 component text component text cc-icon-button primary component border-48"
+        class="component component component component text text text size-48 hug size-48 cc-icon-button primary component border-48 component"
         data-test-id="test-id"
         href="http://example.com"
       >
@@ -38,7 +38,7 @@ exports[`IconButton Href tests should set \`href\` attribute and be link 1`] = `
   "container": <div>
     <a
       aria-disabled="false"
-      class="component text size-48 hug size-48 component text component text cc-icon-button primary component border-48"
+      class="component component component component text text text size-48 hug size-48 cc-icon-button primary component border-48 component"
       data-test-id="test-id"
       href="http://example.com"
     >
@@ -125,7 +125,7 @@ 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 border-48"
+        class="component component component component text text text size-48 hug size-48 cc-icon-button primary component border-48 component"
         type="button"
       >
         <span
@@ -154,7 +154,7 @@ 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 border-48"
+      class="component component component component text text text size-48 hug size-48 cc-icon-button primary component border-48 component"
       type="button"
     >
       <span
diff --git a/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap b/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap
index 5a9359ceb7..005cba9f19 100644
--- a/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap
@@ -140,7 +140,7 @@ 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 border-32"
+                              class="component component component component text text text size-48 hug size-48 cc-icon-button button button mobile primary component border-32 component"
                               type="button"
                             >
                               <span
@@ -380,7 +380,7 @@ 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 secondary secondary secondary size-56 hug size-56 button component"
                               type="button"
                             >
                               <span
@@ -390,7 +390,7 @@ exports[`InputAutocompleteMobile Snapshots tests should match snapshot in open s
                               </span>
                             </button>
                             <button
-                              class="component primary size-56 hug size-56 component primary component primary button"
+                              class="component component component component primary primary primary size-56 hug size-56 button component"
                               type="button"
                             >
                               <span
diff --git a/packages/modal/src/__snapshots__/Component.test.tsx.snap b/packages/modal/src/__snapshots__/Component.test.tsx.snap
index b1a3c8c7e5..5ad19be056 100644
--- a/packages/modal/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/modal/src/__snapshots__/Component.test.tsx.snap
@@ -27,7 +27,7 @@ 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 text text text size-48 hug size-48 component component component"
                 type="button"
               >
                 <span
@@ -74,7 +74,7 @@ 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 border-48"
+                  class="component component component component text text text size-48 hug size-48 cc-icon-button button button primary component border-48 component"
                   type="button"
                 >
                   <span
@@ -161,7 +161,7 @@ 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 text text text size-32 hug size-32 component component mobileComponent component"
                 type="button"
               >
                 <span
@@ -208,7 +208,7 @@ 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 border-32"
+                  class="component component component component text text text size-48 hug size-48 cc-icon-button button button mobile primary component border-32 component"
                   type="button"
                 >
                   <span
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 c48716b3a7..a3aed89e0c 100644
--- a/packages/navigation-bar-private/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/navigation-bar-private/src/__snapshots__/Component.test.tsx.snap
@@ -18,7 +18,7 @@ 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 text text text size-48 hug size-48 component component component"
               data-test-id="navigation-bar-dti-back-button"
               type="button"
             >
@@ -66,7 +66,7 @@ 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 border-48"
+                class="component component component component text text text size-48 hug size-48 cc-icon-button button button primary component border-48 component"
                 data-test-id="navigation-bar-dti-closer"
                 type="button"
               >
diff --git a/packages/notification-manager/src/__snapshots__/component.test.tsx.snap b/packages/notification-manager/src/__snapshots__/component.test.tsx.snap
index fec0ad535e..d4e0264820 100644
--- a/packages/notification-manager/src/__snapshots__/component.test.tsx.snap
+++ b/packages/notification-manager/src/__snapshots__/component.test.tsx.snap
@@ -57,7 +57,7 @@ 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 border-48"
+                class="component component component component text text text size-48 hug size-48 cc-icon-button closeButton closeButton primary component border-48 component"
                 type="button"
               >
                 <span
@@ -120,7 +120,7 @@ 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 border-48"
+                class="component component component component text text text size-48 hug size-48 cc-icon-button closeButton closeButton primary component border-48 component"
                 type="button"
               >
                 <span
@@ -183,7 +183,7 @@ 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 border-48"
+                class="component component component component text text text size-48 hug size-48 cc-icon-button closeButton closeButton primary component border-48 component"
                 type="button"
               >
                 <span
diff --git a/packages/notification/src/__snapshots__/Component.test.tsx.snap b/packages/notification/src/__snapshots__/Component.test.tsx.snap
index c7faafdfec..e4212619c1 100644
--- a/packages/notification/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/notification/src/__snapshots__/Component.test.tsx.snap
@@ -67,7 +67,7 @@ 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 border-48"
+              class="component component component component text text text size-48 hug size-48 cc-icon-button closeButton closeButton primary component border-48 component"
               type="button"
             >
               <span
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..53d04ecca2 100644
--- a/packages/pass-code-v1/src/__snapshots__/component.test.tsx.snap
+++ b/packages/pass-code-v1/src/__snapshots__/component.test.tsx.snap
@@ -39,7 +39,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -53,7 +53,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -67,7 +67,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -81,7 +81,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -95,7 +95,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -109,7 +109,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -123,7 +123,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -137,7 +137,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -151,7 +151,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -166,7 +166,7 @@ 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 secondary secondary secondary size-56 hug size-56 iconOnly button secondary digit component"
           type="button"
         >
           0
@@ -206,7 +206,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -220,7 +220,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -234,7 +234,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -248,7 +248,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -262,7 +262,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -276,7 +276,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -290,7 +290,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -304,7 +304,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -318,7 +318,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -333,7 +333,7 @@ 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 secondary secondary secondary size-56 hug size-56 iconOnly button secondary digit component"
           type="button"
         >
           0
@@ -343,7 +343,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with error prop 1`] = `
         class="component"
       >
         <button
-          class="component text size-56 hug size-56 component text component text button text"
+          class="component component component component text text text size-56 hug size-56 button text component"
           type="button"
         >
           <span
@@ -400,7 +400,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -414,7 +414,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -428,7 +428,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -442,7 +442,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -456,7 +456,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -470,7 +470,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -484,7 +484,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -498,7 +498,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -512,7 +512,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -527,7 +527,7 @@ 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 secondary secondary secondary size-56 hug size-56 iconOnly button secondary digit component"
           type="button"
         >
           0
diff --git a/packages/pass-code/src/__snapshots__/component.test.tsx.snap b/packages/pass-code/src/__snapshots__/component.test.tsx.snap
index 0fdc1d4e03..1f0d7d5af5 100644
--- a/packages/pass-code/src/__snapshots__/component.test.tsx.snap
+++ b/packages/pass-code/src/__snapshots__/component.test.tsx.snap
@@ -53,7 +53,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -63,7 +63,7 @@ exports[`PassCode Snapshot tests should match snapshot with code length 1`] = `
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -73,7 +73,7 @@ exports[`PassCode Snapshot tests should match snapshot with code length 1`] = `
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -83,7 +83,7 @@ exports[`PassCode Snapshot tests should match snapshot with code length 1`] = `
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -93,7 +93,7 @@ exports[`PassCode Snapshot tests should match snapshot with code length 1`] = `
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -103,7 +103,7 @@ exports[`PassCode Snapshot tests should match snapshot with code length 1`] = `
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -113,7 +113,7 @@ exports[`PassCode Snapshot tests should match snapshot with code length 1`] = `
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -123,7 +123,7 @@ exports[`PassCode Snapshot tests should match snapshot with code length 1`] = `
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -133,7 +133,7 @@ exports[`PassCode Snapshot tests should match snapshot with code length 1`] = `
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -144,7 +144,7 @@ exports[`PassCode Snapshot tests should match snapshot with code length 1`] = `
       </button>
       <div />
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary iconOnly button secondary digit"
+        class="component component component component secondary secondary secondary size-56 hug size-56 iconOnly button secondary digit component"
         type="button"
       >
         0
@@ -179,7 +179,7 @@ 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 secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -189,7 +189,7 @@ exports[`PassCode Snapshot tests should match snapshot with unknown code length
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -199,7 +199,7 @@ exports[`PassCode Snapshot tests should match snapshot with unknown code length
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -209,7 +209,7 @@ exports[`PassCode Snapshot tests should match snapshot with unknown code length
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -219,7 +219,7 @@ exports[`PassCode Snapshot tests should match snapshot with unknown code length
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -229,7 +229,7 @@ exports[`PassCode Snapshot tests should match snapshot with unknown code length
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -239,7 +239,7 @@ exports[`PassCode Snapshot tests should match snapshot with unknown code length
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -249,7 +249,7 @@ exports[`PassCode Snapshot tests should match snapshot with unknown code length
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -259,7 +259,7 @@ exports[`PassCode Snapshot tests should match snapshot with unknown code length
         </span>
       </button>
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary button secondary digit"
+        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -270,7 +270,7 @@ exports[`PassCode Snapshot tests should match snapshot with unknown code length
       </button>
       <div />
       <button
-        class="component secondary size-56 hug size-56 component secondary component secondary iconOnly button secondary digit"
+        class="component component component component secondary secondary secondary size-56 hug size-56 iconOnly button secondary digit component"
         type="button"
       >
         0
diff --git a/packages/password-input/src/__snapshots__/component.test.tsx.snap b/packages/password-input/src/__snapshots__/component.test.tsx.snap
index 23fb8a143c..9dff03d918 100644
--- a/packages/password-input/src/__snapshots__/component.test.tsx.snap
+++ b/packages/password-input/src/__snapshots__/component.test.tsx.snap
@@ -26,7 +26,7 @@ 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 border-24"
+            class="component component component component text text text size-48 hug size-48 cc-icon-button eye secondary component border-24 component"
             title="Показать"
             type="button"
           >
diff --git a/packages/picker-button/src/__snapshots__/Component.test.tsx.snap b/packages/picker-button/src/__snapshots__/Component.test.tsx.snap
index aae9bfa756..5a32b42f0c 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 component component component secondary secondary secondary size-56 hug size-56 block withRightAddons component"
         id="downshift-:r0:-input"
         tabindex="0"
         type="button"
@@ -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 component component component secondary secondary secondary size-56 hug size-56 block withRightAddons component"
         id="downshift-:r2:-input"
         tabindex="0"
         type="button"
@@ -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 component component component secondary secondary secondary size-56 hug size-56 block withRightAddons component"
         id="downshift-:r4:-input"
         tabindex="0"
         type="button"
@@ -178,7 +178,7 @@ 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 component component component secondary secondary secondary size-56 hug size-56 block iconOnly component"
         id="downshift-:r1:-input"
         tabindex="0"
         type="button"
@@ -223,7 +223,7 @@ 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 component component component secondary secondary secondary size-56 hug size-56 block iconOnly component"
         id="downshift-:r1:-input"
         tabindex="0"
         type="button"
@@ -268,7 +268,7 @@ 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 component component component secondary secondary secondary size-56 hug size-56 block iconOnly component"
         id="downshift-:r3:-input"
         tabindex="0"
         type="button"
@@ -359,7 +359,7 @@ 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 border-32"
+                            class="component component component component text text text size-48 hug size-48 cc-icon-button button button mobile primary component border-32 component"
                             type="button"
                           >
                             <span
@@ -1382,7 +1382,7 @@ 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 component component component secondary secondary secondary size-56 hug size-56 block iconOnly component"
         id="downshift-:r5:-input"
         tabindex="0"
         type="button"
@@ -1473,7 +1473,7 @@ 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 border-32"
+                            class="component component component component text text text size-48 hug size-48 cc-icon-button button button mobile primary component border-32 component"
                             type="button"
                           >
                             <span
diff --git a/packages/side-panel/src/__snapshots__/Component.test.tsx.snap b/packages/side-panel/src/__snapshots__/Component.test.tsx.snap
index d2e4a1ca5f..f94bd86c50 100644
--- a/packages/side-panel/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/side-panel/src/__snapshots__/Component.test.tsx.snap
@@ -30,7 +30,7 @@ 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 text text text size-48 hug size-48 component component component"
                   type="button"
                 >
                   <span
@@ -77,7 +77,7 @@ 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 border-48"
+                    class="component component component component text text text size-48 hug size-48 cc-icon-button button button primary component border-48 component"
                     type="button"
                   >
                     <span
@@ -168,7 +168,7 @@ 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 text text text size-32 hug size-32 component component mobileComponent component"
                   type="button"
                 >
                   <span
@@ -215,7 +215,7 @@ 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 border-32"
+                    class="component component component component text text text size-48 hug size-48 cc-icon-button button button mobile primary component border-32 component"
                     type="button"
                   >
                     <span
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 a4e0f61f33b8e6b4dbbda9f515346932676ad5fe Mon Sep 17 00:00:00 2001
From: hextion <100ishundred@gmail.com>
Date: Mon, 6 Oct 2025 12:22:31 +0300
Subject: [PATCH 03/11] feat(button): base button candidate

---
 .../src/__snapshots__/Component.test.tsx.snap |   2 +-
 .../src/__snapshots__/Component.test.tsx.snap |  28 +-
 .../base-button-candidate/Component.tsx       | 133 +++++
 .../base-button-candidate/index.module.css    |  39 ++
 .../components/base-button-candidate/index.ts |   1 +
 .../src/components/base-button/Component.tsx  | 109 +---
 .../components/base-button/default.module.css |  12 +-
 .../components/base-button/index.module.css   | 115 ++---
 .../base-button/inverted.module.css           |  12 +-
 .../components/button-component/Component.tsx |   1 -
 .../button-component/index.module.css         |   2 +-
 .../src/desktop/default.desktop.module.css    |   2 +-
 .../src/desktop/inverted.desktop.module.css   |   2 +-
 .../src/mobile/default.mobile.module.css      |   2 +-
 .../src/mobile/inverted.mobile.module.css     |   2 +-
 packages/button/src/shared/hooks.ts           |  32 ++
 packages/button/src/shared/index.ts           |   1 +
 .../src/__snapshots__/Component.test.tsx.snap | 130 ++---
 .../src/__snapshots__/Component.test.tsx.snap |  64 +--
 .../src/__snapshots__/Component.test.tsx.snap | 480 +++++++++---------
 .../__snapshots__/Component.test.tsx.snap     |   8 +-
 .../src/__snapshots__/Component.test.tsx.snap |   2 +-
 .../src/__snapshots__/Component.test.tsx.snap |   6 +-
 .../src/__snapshots__/Component.test.tsx.snap |  90 ++--
 .../src/__snapshots__/Component.test.tsx.snap |  36 +-
 .../src/__snapshots__/Component.test.tsx.snap |   8 +-
 .../src/__snapshots__/Component.test.tsx.snap |   8 +-
 .../src/__snapshots__/Component.test.tsx.snap |   6 +-
 .../src/__snapshots__/Component.test.tsx.snap |   8 +-
 .../src/__snapshots__/Component.test.tsx.snap |   4 +-
 .../src/__snapshots__/component.test.tsx.snap |   6 +-
 .../src/__snapshots__/Component.test.tsx.snap |   2 +-
 .../src/__snapshots__/component.test.tsx.snap |  62 +--
 .../src/__snapshots__/component.test.tsx.snap |  40 +-
 .../src/__snapshots__/component.test.tsx.snap |   2 +-
 .../src/__snapshots__/Component.test.tsx.snap |  18 +-
 .../src/__snapshots__/Component.test.tsx.snap |   8 +-
 37 files changed, 787 insertions(+), 696 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/shared/hooks.ts

diff --git a/packages/attach/src/__snapshots__/Component.test.tsx.snap b/packages/attach/src/__snapshots__/Component.test.tsx.snap
index 537986e6df..acae61ae25 100644
--- a/packages/attach/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/attach/src/__snapshots__/Component.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Attach Snapshots tests should match snapshot 1`] = `
     class="component size-48"
   >
     <button
-      class="component component component component secondary secondary secondary size-48 hug size-48 withLeftAddons component"
+      class="component component component component component secondary secondary secondary size-48 hug size-48 withLeftAddons component"
       type="button"
     >
       <span
diff --git a/packages/button/src/__snapshots__/Component.test.tsx.snap b/packages/button/src/__snapshots__/Component.test.tsx.snap
index f88e91dcb2..f08a20ad8c 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 component component component secondary secondary secondary size-56 hug size-56 iconOnly component"
+        class="component component component component component secondary secondary secondary size-56 hug size-56 iconOnly component"
         type="button"
       />
     </div>
   </body>,
   "container": <div>
     <button
-      class="component component component component secondary secondary secondary size-56 hug size-56 iconOnly component"
+      class="component component component component component secondary secondary secondary size-56 hug size-56 iconOnly component"
       type="button"
     />
   </div>,
@@ -78,7 +78,7 @@ exports[`Button Snapshots tests should render anchor if href pass 1`] = `
     <div>
       <a
         aria-disabled="false"
-        class="component component component component secondary secondary secondary size-56 hug size-56 iconOnly component"
+        class="component component component component component secondary secondary secondary size-56 hug size-56 iconOnly component"
         href="https://some-url"
       />
     </div>
@@ -86,7 +86,7 @@ exports[`Button Snapshots tests should render anchor if href pass 1`] = `
   "container": <div>
     <a
       aria-disabled="false"
-      class="component component component component secondary secondary secondary size-56 hug size-56 iconOnly component"
+      class="component component component component component secondary secondary secondary size-56 hug size-56 iconOnly component"
       href="https://some-url"
     />
   </div>,
@@ -150,14 +150,14 @@ exports[`Button Snapshots tests should render button by default 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component component component component secondary secondary secondary size-56 hug size-56 iconOnly component"
+        class="component component component component component secondary secondary secondary size-56 hug size-56 iconOnly component"
         type="button"
       />
     </div>
   </body>,
   "container": <div>
     <button
-      class="component component component component secondary secondary secondary size-56 hug size-56 iconOnly component"
+      class="component component component component component secondary secondary secondary size-56 hug size-56 iconOnly component"
       type="button"
     />
   </div>,
@@ -221,7 +221,7 @@ exports[`Button Snapshots tests should render left addons 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component component component component secondary secondary secondary size-56 hug size-56 iconOnly component"
+        class="component component component component component secondary secondary secondary size-56 hug size-56 iconOnly component"
         type="button"
       >
         <span
@@ -236,7 +236,7 @@ exports[`Button Snapshots tests should render left addons 1`] = `
   </body>,
   "container": <div>
     <button
-      class="component component component component secondary secondary secondary size-56 hug size-56 iconOnly component"
+      class="component component component component component secondary secondary secondary size-56 hug size-56 iconOnly component"
       type="button"
     >
       <span
@@ -309,7 +309,7 @@ exports[`Button Snapshots tests should render loader if loading & href pass 1`]
     <div>
       <a
         aria-disabled="false"
-        class="component component component component secondary secondary secondary size-56 hug size-56 iconOnly loading component"
+        class="component loading component component component component secondary secondary secondary size-56 hug size-56 iconOnly loading component"
         href="https://some-url"
       >
         <svg
@@ -354,7 +354,7 @@ exports[`Button Snapshots tests should render loader if loading & href pass 1`]
   "container": <div>
     <a
       aria-disabled="false"
-      class="component component component component secondary secondary secondary size-56 hug size-56 iconOnly loading component"
+      class="component loading component component component component secondary secondary secondary size-56 hug size-56 iconOnly loading component"
       href="https://some-url"
     >
       <svg
@@ -455,7 +455,7 @@ exports[`Button Snapshots tests should render loader if loading pass 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component component component component secondary secondary secondary size-56 hug size-56 iconOnly loading component"
+        class="component loading component component component component secondary secondary secondary size-56 hug size-56 iconOnly loading component"
         type="button"
       >
         <svg
@@ -499,7 +499,7 @@ exports[`Button Snapshots tests should render loader if loading pass 1`] = `
   </body>,
   "container": <div>
     <button
-      class="component component component component secondary secondary secondary size-56 hug size-56 iconOnly loading component"
+      class="component loading component component component component secondary secondary secondary size-56 hug size-56 iconOnly loading component"
       type="button"
     >
       <svg
@@ -600,7 +600,7 @@ exports[`Button Snapshots tests should render right addons 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component component component component secondary secondary secondary size-56 hug size-56 iconOnly component"
+        class="component component component component component secondary secondary secondary size-56 hug size-56 iconOnly component"
         type="button"
       >
         <span
@@ -615,7 +615,7 @@ exports[`Button Snapshots tests should render right addons 1`] = `
   </body>,
   "container": <div>
     <button
-      class="component component component component secondary secondary secondary size-56 hug size-56 iconOnly component"
+      class="component component component component component secondary secondary secondary size-56 hug size-56 iconOnly component"
       type="button"
     >
       <span
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..1a960d5477
--- /dev/null
+++ b/packages/button/src/components/base-button-candidate/Component.tsx
@@ -0,0 +1,133 @@
+/* eslint-disable complexity */
+import React, {
+    type AnchorHTMLAttributes,
+    type ButtonHTMLAttributes,
+    type ComponentType,
+    forwardRef,
+    type ForwardRefExoticComponent,
+    type MouseEventHandler,
+    type RefAttributes,
+    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 styles from './index.module.css';
+
+interface ComponentProps {
+    /**
+     * Растягивает компонент на ширину контейнера
+     * @default false
+     */
+    block?: boolean;
+
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+
+    /**
+     * Дополнительный класс для лоадера
+     */
+    loaderClassName?: string;
+
+    /**
+     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
+     */
+    Component?:
+        | ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>
+        | ComponentType<ButtonHTMLAttributes<HTMLButtonElement>>
+        | ForwardRefExoticComponent<
+              AnchorHTMLAttributes<HTMLAnchorElement> & RefAttributes<HTMLAnchorElement>
+          >
+        | ForwardRefExoticComponent<
+              ButtonHTMLAttributes<HTMLButtonElement> & RefAttributes<HTMLButtonElement>
+          >;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования.
+     * Для спиннера используется модификатор -loader
+     */
+    dataTestId?: string;
+
+    /**
+     * Показать лоадер
+     * @default false
+     */
+    loading?: boolean;
+}
+
+export interface BaseButtonCandidateProps
+    extends ComponentProps,
+        Omit<ButtonHTMLAttributes<HTMLElement>, keyof ComponentProps>,
+        Omit<
+            AnchorHTMLAttributes<HTMLElement>,
+            keyof ButtonHTMLAttributes<HTMLElement> | keyof ComponentProps
+        > {}
+
+export const BaseButtonCandidate = forwardRef<HTMLElement, BaseButtonCandidateProps>(
+    (
+        {
+            children,
+            block = false,
+            className,
+            loaderClassName,
+            dataTestId,
+            loading = false,
+            Component = ButtonComponent,
+            disabled = false,
+            type = 'button',
+            onClick,
+            ...restProps
+        },
+        ref,
+    ) => {
+        const buttonRef = useRef<HTMLElement>(null);
+        const [focused] = useFocus(buttonRef, 'keyboard');
+
+        const handleClick: MouseEventHandler<HTMLElement> = (event) => {
+            if (disabled || loading) {
+                event.preventDefault();
+                event.stopPropagation();
+            } else {
+                onClick?.(event);
+            }
+        };
+
+        return (
+            <Component
+                data-test-id={dataTestId}
+                {...restProps}
+                className={cn(
+                    styles.component,
+                    {
+                        [styles.focused]: focused,
+                        [styles.block]: block,
+                        [styles.loading]: loading,
+                    },
+                    className,
+                )}
+                type={type}
+                disabled={disabled}
+                onClick={handleClick}
+                ref={mergeRefs([buttonRef, ref])}
+            >
+                {loading && (
+                    <Spinner
+                        preset={24}
+                        visible={true}
+                        dataTestId={getDataTestId(dataTestId, 'loader')}
+                        className={cn(styles.loader, loaderClassName)}
+                    />
+                )}
+                {children}
+            </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..4682406581
--- /dev/null
+++ b/packages/button/src/components/base-button-candidate/index.module.css
@@ -0,0 +1,39 @@
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
+
+.component {
+    @mixin reset-tap-highlight-color;
+
+    display: inline-flex;
+    vertical-align: middle;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-content: center;
+    align-items: center;
+    position: relative;
+
+    /* 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;
+    }
+}
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..adfa43be82
--- /dev/null
+++ b/packages/button/src/components/base-button-candidate/index.ts
@@ -0,0 +1 @@
+export { BaseButtonCandidate } from './Component';
diff --git a/packages/button/src/components/base-button/Component.tsx b/packages/button/src/components/base-button/Component.tsx
index abc8ae724b..6a61f705d2 100644
--- a/packages/button/src/components/base-button/Component.tsx
+++ b/packages/button/src/components/base-button/Component.tsx
@@ -1,14 +1,9 @@
-/* eslint-disable complexity */
-import React, { forwardRef, type MouseEventHandler, useEffect, useRef, useState } from 'react';
-import mergeRefs from 'react-merge-refs';
+import React, { forwardRef } from 'react';
 import cn from 'classnames';
 
-import { getDataTestId, isNonNullable } 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 { 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';
@@ -32,16 +27,13 @@ export const BaseButton = forwardRef<ButtonRef, CommonButtonProps & PrivateButto
             leftAddons,
             rightAddons,
             size = 56,
-            block = false,
             className,
             spinnerClassName,
-            dataTestId,
             href,
             loading = false,
             nowrap = false,
             colors = 'default',
             Component = ButtonComponent,
-            onClick,
             styles = {},
             colorStylesMap = { default: {}, inverted: {} },
             disabled = false,
@@ -50,15 +42,7 @@ export const BaseButton = forwardRef<ButtonRef, CommonButtonProps & PrivateButto
         },
         ref,
     ) => {
-        const buttonRef = useRef<HTMLElement>(null);
-
-        const [focused] = useFocus(buttonRef, 'keyboard');
-
-        const [loaderTimePassed, setLoaderTimePassed] = useState(true);
-
-        const timerId = useRef<number | null>(null);
-
-        const showLoader = loading || !loaderTimePassed;
+        const showLoader = useLoading(loading);
 
         const showHint = hint && [56, 64, 72].includes(size);
 
@@ -83,8 +67,6 @@ export const BaseButton = forwardRef<ButtonRef, CommonButtonProps & PrivateButto
                 shape === 'rounded' && commonStyles[shape],
                 {
                     [commonStyles.allowBackdropBlur]: allowBackdropBlur,
-                    [commonStyles.focused]: focused,
-                    [commonStyles.block]: block,
                     [commonStyles.iconOnly]: iconOnly,
                     [commonStyles.loading]: showLoader,
                     [commonStyles.withRightAddons]: Boolean(rightAddons) && !iconOnly,
@@ -92,14 +74,29 @@ export const BaseButton = forwardRef<ButtonRef, CommonButtonProps & PrivateButto
                     [colorStyles[colors].loading]: showLoader,
                     [colorStylesMap[colors].loading]: showLoader,
                 },
-                passDisabledClass && [styles.disabled, colorStyles[colors].disabled],
+                passDisabledClass && [commonStyles.disabled, colorStyles[colors].disabled],
                 className,
             ),
-            'data-test-id': dataTestId,
         };
 
-        const buttonChildren = (
-            <React.Fragment>
+        const loaderClassName = cn(
+            colorStyles[colors].loader,
+            colorStylesMap[colors].loader,
+            spinnerClassName,
+        );
+
+        return (
+            <BaseButtonCandidate
+                {...componentProps}
+                {...restProps}
+                Component={Component}
+                loaderClassName={loaderClassName}
+                loading={showLoader}
+                href={href}
+                type={type}
+                disabled={disabled}
+                ref={ref}
+            >
                 {leftAddons && <span className={commonStyles.addons}>{leftAddons}</span>}
                 {children && (
                     <span
@@ -117,66 +114,8 @@ export const BaseButton = forwardRef<ButtonRef, CommonButtonProps & PrivateButto
                         )}
                     </span>
                 )}
-
-                {showLoader && (
-                    <Spinner
-                        preset={24}
-                        dataTestId={getDataTestId(dataTestId, 'loader')}
-                        visible={true}
-                        className={cn(
-                            commonStyles.loader,
-                            colorStyles[colors].loader,
-                            colorStylesMap[colors].loader,
-                            spinnerClassName,
-                        )}
-                    />
-                )}
-
                 {rightAddons && <span className={commonStyles.addons}>{rightAddons}</span>}
-            </React.Fragment>
-        );
-
-        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);
-                }
-            },
-            [],
-        );
-
-        const handleClick: MouseEventHandler<HTMLElement> = (event) => {
-            if (disabled || showLoader) {
-                event.preventDefault();
-                event.stopPropagation();
-            } else {
-                onClick?.(event);
-            }
-        };
-
-        return (
-            <Component
-                {...componentProps}
-                {...restProps}
-                href={href}
-                type={type}
-                disabled={disabled}
-                onClick={handleClick}
-                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 6373dff28a..60660e316a 100644
--- a/packages/button/src/components/base-button/default.module.css
+++ b/packages/button/src/components/base-button/default.module.css
@@ -16,7 +16,7 @@
             background-color: var(--button-accent-active-bg-color);
         }
 
-        & > .loader {
+        & .loader {
             color: var(--button-spinner-static-color);
         }
     }
@@ -33,7 +33,7 @@
         color: var(--button-secondary-color);
         border: var(--button-border-width) solid var(--button-secondary-base-border-color);
 
-        & > .loader {
+        & .loader {
             color: var(--button-spinner-default-color);
         }
 
@@ -58,7 +58,7 @@
             background-color: var(--button-outlined-active-bg-color);
         }
 
-        & > .loader {
+        & .loader {
             color: var(--button-spinner-default-color);
         }
 
@@ -83,7 +83,7 @@
             background-color: var(--button-tertiary-active-bg-color);
         }
 
-        & > .loader {
+        & .loader {
             color: var(--button-spinner-default-color);
         }
 
@@ -107,7 +107,7 @@
             background-color: var(--button-transparent-active-bg-color);
         }
 
-        & > .loader {
+        & .loader {
             color: var(--button-spinner-default-color);
         }
 
@@ -126,7 +126,7 @@
             }
         }
 
-        & > .loader {
+        & .loader {
             color: var(--button-spinner-default-color);
         }
 
diff --git a/packages/button/src/components/base-button/index.module.css b/packages/button/src/components/base-button/index.module.css
index cb7f7084db..deb2afc13c 100644
--- a/packages/button/src/components/base-button/index.module.css
+++ b/packages/button/src/components/base-button/index.module.css
@@ -5,38 +5,28 @@
     backdrop-filter: blur(80px);
 }
 
+@define-mixin addon-label-gap $gap {
+    .addons + .label,
+    .label + .addons,
+    .addons + .addons {
+        margin-left: $gap;
+    }
+}
+
 .component {
-    && {
+    &&& {
         font-weight: var(--button-font-weight);
         font-family: var(--font-family);
     }
-
-    @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;
     transition:
         background 0.2s ease,
         border 0.2s ease,
         color 0.2s ease;
-    box-sizing: border-box;
 
     &.rounded {
         border-radius: var(--border-radius-pill);
     }
 
-    /* Block */
-
-    &.block {
-        display: flex;
-        width: 100%;
-    }
-
     &.hug {
         justify-content: center;
         text-align: center;
@@ -64,24 +54,6 @@
         display: block;
     }
 
-    .loader {
-        position: absolute;
-        left: var(--gap-0);
-        right: var(--gap-0);
-        margin: var(--gap-0) auto;
-    }
-
-    &.focused {
-        @mixin focus-outline;
-    }
-
-    &.loading {
-        .label,
-        .addons {
-            opacity: 0;
-        }
-    }
-
     &.allowBackdropBlur {
         &.secondary {
             @mixin backdrop-filter;
@@ -104,12 +76,13 @@
         }
         &:not(.text) {
             min-height: var(--size-xxs-height);
-            padding: var(--gap-0) 15px;
 
+            &:not(.iconOnly) {
+                padding: var(--gap-0) 15px;
+            }
             &.withLeftAddons {
                 padding-left: 11px;
             }
-
             &.withRightAddons {
                 padding-right: 11px;
             }
@@ -128,12 +101,13 @@
         }
         &:not(.text) {
             min-height: var(--size-xs-height);
-            padding: var(--gap-0) 19px;
 
+            &:not(.iconOnly) {
+                padding: var(--gap-0) 19px;
+            }
             &.withLeftAddons {
                 padding-left: 15px;
             }
-
             &.withRightAddons {
                 padding-right: 15px;
             }
@@ -152,12 +126,13 @@
         }
         &:not(.text) {
             min-height: var(--size-s-height);
-            padding: var(--gap-0) 23px;
 
+            &:not(.iconOnly) {
+                padding: var(--gap-0) 23px;
+            }
             &.withLeftAddons {
                 padding-left: 19px;
             }
-
             &.withRightAddons {
                 padding-right: 19px;
             }
@@ -178,12 +153,13 @@
         }
         &:not(.text) {
             min-height: var(--size-m-height);
-            padding: var(--gap-0) 27px;
 
+            &:not(.iconOnly) {
+                padding: var(--gap-0) 27px;
+            }
             &.withLeftAddons {
                 padding-left: 23px;
             }
-
             &.withRightAddons {
                 padding-right: 23px;
             }
@@ -202,12 +178,13 @@
         }
         &:not(.text) {
             min-height: var(--size-l-height);
-            padding: var(--gap-0) 31px;
 
+            &:not(.iconOnly) {
+                padding: var(--gap-0) 31px;
+            }
             &.withLeftAddons {
                 padding-left: 27px;
             }
-
             &.withRightAddons {
                 padding-right: 27px;
             }
@@ -226,12 +203,13 @@
         }
         &:not(.text) {
             min-height: var(--size-xl-height);
-            padding: var(--gap-0) 35px;
 
+            &:not(.iconOnly) {
+                padding: var(--gap-0) 35px;
+            }
             &.withLeftAddons {
                 padding-left: 31px;
             }
-
             &.withRightAddons {
                 &.size-72 {
                     padding-right: 31px;
@@ -252,49 +230,18 @@
         display: flex;
         flex-shrink: 0;
         align-items: center;
-        margin: var(--gap-0);
-
-        &:first-child {
-            margin-right: 6px;
-        }
-
-        &:last-child {
-            margin-left: 6px;
-        }
-
-        &:only-child {
-            margin: var(--gap-0);
-        }
     }
 
+    @mixin addon-label-gap 6px;
+
     &.size-48,
     &.size-56 {
-        & .addons {
-            &:first-child {
-                margin-right: var(--gap-8);
-            }
-            &:last-child {
-                margin-left: var(--gap-8);
-            }
-            &:only-child {
-                margin: var(--gap-0);
-            }
-        }
+        @mixin addon-label-gap var(--gap-8);
     }
 
     &.size-64,
     &.size-72 {
-        & .addons {
-            &:first-child {
-                margin-right: var(--gap-12);
-            }
-            &:last-child {
-                margin-left: var(--gap-12);
-            }
-            &:only-child {
-                margin: var(--gap-0);
-            }
-        }
+        @mixin addon-label-gap var(--gap-12);
     }
 
     /* Disabled */
diff --git a/packages/button/src/components/base-button/inverted.module.css b/packages/button/src/components/base-button/inverted.module.css
index db6886a490..8472f256a0 100644
--- a/packages/button/src/components/base-button/inverted.module.css
+++ b/packages/button/src/components/base-button/inverted.module.css
@@ -14,7 +14,7 @@
             background-color: var(--button-inverted-accent-active-bg-color);
         }
 
-        & > .loader {
+        & .loader {
             color: var(--button-spinner-inverted-static-color);
         }
     }
@@ -31,7 +31,7 @@
         color: var(--button-inverted-secondary-color);
         border: var(--button-border-width) solid var(--button-inverted-secondary-base-border-color);
 
-        & > .loader {
+        & .loader {
             color: var(--button-spinner-inverted-color);
         }
 
@@ -56,7 +56,7 @@
             background-color: var(--button-inverted-outlined-active-bg-color);
         }
 
-        & > .loader {
+        & .loader {
             color: var(--button-spinner-inverted-color);
         }
 
@@ -81,7 +81,7 @@
             background-color: var(--button-inverted-tertiary-active-bg-color);
         }
 
-        & > .loader {
+        & .loader {
             color: var(--button-spinner-inverted-color);
         }
 
@@ -105,7 +105,7 @@
             background-color: var(--button-inverted-transparent-active-bg-color);
         }
 
-        & > .loader {
+        & .loader {
             color: var(--button-spinner-inverted-color);
         }
 
@@ -124,7 +124,7 @@
             }
         }
 
-        & > .loader {
+        & .loader {
             color: var(--button-spinner-inverted-color);
         }
 
diff --git a/packages/button/src/components/button-component/Component.tsx b/packages/button/src/components/button-component/Component.tsx
index 63b3dc3572..29cc03ba9d 100644
--- a/packages/button/src/components/button-component/Component.tsx
+++ b/packages/button/src/components/button-component/Component.tsx
@@ -15,7 +15,6 @@ export const ButtonComponent = forwardRef<HTMLElement, ButtonComponentProps>(
             <Tag
                 {...restProps}
                 className={cn(className, styles.component)}
-                // className={className}
                 ref={mergeRefs([ref])}
                 rel={
                     rel ??
diff --git a/packages/button/src/components/button-component/index.module.css b/packages/button/src/components/button-component/index.module.css
index 7cb28f408b..85340ecb69 100644
--- a/packages/button/src/components/button-component/index.module.css
+++ b/packages/button/src/components/button-component/index.module.css
@@ -9,7 +9,7 @@
     box-shadow: none;
     user-select: none;
     appearance: none;
-    background: transparent;
+    background: none;
     border: none;
     cursor: pointer;
 }
diff --git a/packages/button/src/desktop/default.desktop.module.css b/packages/button/src/desktop/default.desktop.module.css
index 85383040a9..fbdad46196 100644
--- a/packages/button/src/desktop/default.desktop.module.css
+++ b/packages/button/src/desktop/default.desktop.module.css
@@ -15,7 +15,7 @@
             background-color: var(--button-primary-active-bg-color);
         }
 
-        & > .loader {
+        & .loader {
             color: var(--button-spinner-primary-color);
         }
     }
diff --git a/packages/button/src/desktop/inverted.desktop.module.css b/packages/button/src/desktop/inverted.desktop.module.css
index 81c6f5d455..e5ebd16e35 100644
--- a/packages/button/src/desktop/inverted.desktop.module.css
+++ b/packages/button/src/desktop/inverted.desktop.module.css
@@ -13,7 +13,7 @@
             background-color: var(--button-inverted-primary-active-bg-color);
         }
 
-        & > .loader {
+        & .loader {
             color: var(--button-spinner-inverted-primary-color);
         }
     }
diff --git a/packages/button/src/mobile/default.mobile.module.css b/packages/button/src/mobile/default.mobile.module.css
index bb7fb36d16..0360cd80ef 100644
--- a/packages/button/src/mobile/default.mobile.module.css
+++ b/packages/button/src/mobile/default.mobile.module.css
@@ -13,7 +13,7 @@
             background-color: var(--button-primary-mobile-active-bg-color);
         }
 
-        & > .loader {
+        & .loader {
             color: var(--button-spinner-primary-mobile-color);
         }
     }
diff --git a/packages/button/src/mobile/inverted.mobile.module.css b/packages/button/src/mobile/inverted.mobile.module.css
index 188ada80c6..8386016fe5 100644
--- a/packages/button/src/mobile/inverted.mobile.module.css
+++ b/packages/button/src/mobile/inverted.mobile.module.css
@@ -15,7 +15,7 @@
             background-color: var(--button-inverted-primary-mobile-active-bg-color);
         }
 
-        & > .loader {
+        & .loader {
             color: var(--button-spinner-inverted-primary-mobile-color);
         }
     }
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/calendar-range/src/__snapshots__/Component.test.tsx.snap b/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap
index bf6fa81b54..2a6ffad59b 100644
--- a/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
             >
               <button
                 aria-label="Предыдущий период"
-                class="component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
+                class="component component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
                 data-test-id="period-slider-btn-previous-day"
                 type="button"
               >
@@ -84,7 +84,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
               </span>
               <button
                 aria-label="Следующий период"
-                class="component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
+                class="component component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
                 data-test-id="period-slider-btn-next-day"
                 type="button"
               >
@@ -169,7 +169,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="0"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -193,7 +193,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -217,7 +217,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -241,7 +241,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -267,7 +267,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -291,7 +291,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -315,7 +315,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -339,7 +339,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -363,7 +363,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -387,7 +387,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -411,7 +411,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -437,7 +437,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -461,7 +461,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -485,7 +485,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -509,7 +509,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -533,7 +533,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -557,7 +557,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -581,7 +581,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -607,7 +607,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -631,7 +631,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -655,7 +655,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -679,7 +679,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -703,7 +703,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -727,7 +727,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -751,7 +751,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -777,7 +777,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -801,7 +801,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -825,7 +825,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -849,7 +849,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -873,7 +873,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -897,7 +897,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -969,7 +969,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
             >
               <button
                 aria-label="Предыдущий период"
-                class="component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
+                class="component component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
                 data-test-id="period-slider-btn-previous-day"
                 type="button"
               >
@@ -1002,7 +1002,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
               </span>
               <button
                 aria-label="Следующий период"
-                class="component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
+                class="component component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
                 data-test-id="period-slider-btn-next-day"
                 type="button"
               >
@@ -1090,7 +1090,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="0"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1116,7 +1116,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1140,7 +1140,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1164,7 +1164,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1188,7 +1188,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1212,7 +1212,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1236,7 +1236,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1260,7 +1260,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1286,7 +1286,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1310,7 +1310,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1334,7 +1334,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1358,7 +1358,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1382,7 +1382,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1406,7 +1406,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1430,7 +1430,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1456,7 +1456,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1480,7 +1480,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1504,7 +1504,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1528,7 +1528,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1552,7 +1552,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1576,7 +1576,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1600,7 +1600,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1626,7 +1626,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1650,7 +1650,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1674,7 +1674,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1698,7 +1698,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1722,7 +1722,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1746,7 +1746,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1770,7 +1770,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
@@ -1796,7 +1796,7 @@ exports[`CalendarRange Display tests should match snapshot 1`] = `
                     tabindex="-1"
                   >
                     <button
-                      class="component component component component text text text size-40 hug size-40 day rounded component"
+                      class="component component component component component text text text size-40 hug size-40 day rounded component"
                       type="button"
                     >
                       <span
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 a69979df8a..f2ab525988 100644
--- a/packages/calendar-with-skeleton/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/calendar-with-skeleton/src/__snapshots__/Component.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
           class="component monthYear"
         >
           <button
-            class="component component component component text text text size-40 hug size-40 button filled button month component"
+            class="component component component component component text text text size-40 hug size-40 button filled button month component"
             type="button"
           >
             <span
@@ -47,7 +47,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
             </span>
           </button>
           <button
-            class="component component component component text text text size-40 hug size-40 button filled button year component"
+            class="component component component component component text text text size-40 hug size-40 button filled button year component"
             type="button"
           >
             <span
@@ -138,7 +138,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -165,7 +165,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -190,7 +190,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -215,7 +215,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -240,7 +240,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -265,7 +265,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -290,7 +290,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -315,7 +315,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -342,7 +342,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -367,7 +367,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -392,7 +392,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -417,7 +417,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -442,7 +442,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -467,7 +467,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -492,7 +492,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -519,7 +519,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -544,7 +544,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -569,7 +569,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -594,7 +594,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -619,7 +619,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -644,7 +644,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -669,7 +669,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -696,7 +696,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -721,7 +721,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -746,7 +746,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -771,7 +771,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -796,7 +796,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -821,7 +821,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -846,7 +846,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="-1"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded component"
                   type="button"
                 >
                   <span
@@ -873,7 +873,7 @@ exports[`Calendar Render tests should render calendar when calendarVisible=\`tru
                 tabindex="0"
               >
                 <button
-                  class="component component component component text text text size-40 hug size-40 day rounded selected component"
+                  class="component component component component component text text text size-40 hug size-40 day rounded selected component"
                   type="button"
                 >
                   <span
diff --git a/packages/calendar/src/__snapshots__/Component.test.tsx.snap b/packages/calendar/src/__snapshots__/Component.test.tsx.snap
index a055003a0e..643b440045 100644
--- a/packages/calendar/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/calendar/src/__snapshots__/Component.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
         class="component monthYear"
       >
         <button
-          class="component component component component text text text size-40 hug size-40 button filled button month component"
+          class="component component component component component text text text size-40 hug size-40 button filled button month component"
           type="button"
         >
           <span
@@ -44,7 +44,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
           </span>
         </button>
         <button
-          class="component component component component text text text size-40 hug size-40 button filled button year component"
+          class="component component component component component text text text size-40 hug size-40 button filled button year component"
           type="button"
         >
           <span
@@ -135,7 +135,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -162,7 +162,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -187,7 +187,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -212,7 +212,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -237,7 +237,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -262,7 +262,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -287,7 +287,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -312,7 +312,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -339,7 +339,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -364,7 +364,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -389,7 +389,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -414,7 +414,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -439,7 +439,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -464,7 +464,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -489,7 +489,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -516,7 +516,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -541,7 +541,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -566,7 +566,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -591,7 +591,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -616,7 +616,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -641,7 +641,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -666,7 +666,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -693,7 +693,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -718,7 +718,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -743,7 +743,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -768,7 +768,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -793,7 +793,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -818,7 +818,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -843,7 +843,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -870,7 +870,7 @@ exports[`Calendar Display tests should match defaultView="days" snapshot 1`] = `
               tabindex="0"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded selected component"
+                class="component component component component component text text text size-40 hug size-40 day rounded selected component"
                 type="button"
               >
                 <span
@@ -916,7 +916,7 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
         class="component monthYear"
       >
         <button
-          class="component component component component text text text size-40 hug size-40 button filled button month component"
+          class="component component component component component text text text size-40 hug size-40 button filled button month component"
           type="button"
         >
           <span
@@ -945,7 +945,7 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
           </span>
         </button>
         <button
-          class="component component component component text text text size-40 hug size-40 button filled button year component"
+          class="component component component component component text text text size-40 hug size-40 button filled button year component"
           type="button"
         >
           <span
@@ -983,7 +983,7 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
       >
         <button
           aria-selected="false"
-          class="component component component component text text text size-40 hug size-40 button default button component"
+          class="component component component component component text text text size-40 hug size-40 button default button component"
           data-date="1577836800000"
           tabindex="-1"
           type="button"
@@ -996,7 +996,7 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
         </button>
         <button
           aria-selected="false"
-          class="component component component component text text text size-40 hug size-40 button default button component"
+          class="component component component component component text text text size-40 hug size-40 button default button component"
           data-date="1580515200000"
           tabindex="-1"
           type="button"
@@ -1009,7 +1009,7 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
         </button>
         <button
           aria-selected="false"
-          class="component component component component text text text size-40 hug size-40 button default button component"
+          class="component component component component component text text text size-40 hug size-40 button default button component"
           data-date="1583020800000"
           tabindex="-1"
           type="button"
@@ -1022,7 +1022,7 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
         </button>
         <button
           aria-selected="false"
-          class="component component component component text text text size-40 hug size-40 button default button component"
+          class="component component component component component text text text size-40 hug size-40 button default button component"
           data-date="1585699200000"
           tabindex="-1"
           type="button"
@@ -1035,7 +1035,7 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
         </button>
         <button
           aria-selected="false"
-          class="component component component component text text text size-40 hug size-40 button default button component"
+          class="component component component component component text text text size-40 hug size-40 button default button component"
           data-date="1588291200000"
           tabindex="-1"
           type="button"
@@ -1048,7 +1048,7 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
         </button>
         <button
           aria-selected="false"
-          class="component component component component text text text size-40 hug size-40 button default button component"
+          class="component component component component component text text text size-40 hug size-40 button default button component"
           data-date="1590969600000"
           tabindex="-1"
           type="button"
@@ -1061,7 +1061,7 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
         </button>
         <button
           aria-selected="false"
-          class="component component component component text text text size-40 hug size-40 button default button component"
+          class="component component component component component text text text size-40 hug size-40 button default button component"
           data-date="1593561600000"
           tabindex="-1"
           type="button"
@@ -1074,7 +1074,7 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
         </button>
         <button
           aria-selected="false"
-          class="component component component component text text text size-40 hug size-40 button default button component"
+          class="component component component component component text text text size-40 hug size-40 button default button component"
           data-date="1596240000000"
           tabindex="-1"
           type="button"
@@ -1087,7 +1087,7 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
         </button>
         <button
           aria-selected="false"
-          class="component component component component text text text size-40 hug size-40 button default button component"
+          class="component component component component component text text text size-40 hug size-40 button default button component"
           data-date="1598918400000"
           tabindex="-1"
           type="button"
@@ -1100,7 +1100,7 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
         </button>
         <button
           aria-selected="false"
-          class="component component component component text text text size-40 hug size-40 button default button component"
+          class="component component component component component text text text size-40 hug size-40 button default button component"
           data-date="1601510400000"
           tabindex="-1"
           type="button"
@@ -1113,7 +1113,7 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
         </button>
         <button
           aria-selected="true"
-          class="component component component component text text text size-40 hug size-40 button selected button component"
+          class="component component component component component text text text size-40 hug size-40 button selected button component"
           data-date="1604188800000"
           tabindex="0"
           type="button"
@@ -1126,7 +1126,7 @@ exports[`Calendar Display tests should match defaultView="months" snapshot 1`] =
         </button>
         <button
           aria-selected="false"
-          class="component component component component text text text size-40 hug size-40 button default button component"
+          class="component component component component component text text text size-40 hug size-40 button default button component"
           data-date="1606780800000"
           tabindex="-1"
           type="button"
@@ -1158,7 +1158,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
         class="component monthYear"
       >
         <button
-          class="component component component component text text text size-40 hug size-40 button filled button month component"
+          class="component component component component component text text text size-40 hug size-40 button filled button month component"
           type="button"
         >
           <span
@@ -1187,7 +1187,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </span>
         </button>
         <button
-          class="component component component component text text text size-40 hug size-40 button filled button year component"
+          class="component component component component component text text text size-40 hug size-40 button filled button year component"
           type="button"
         >
           <span
@@ -1228,7 +1228,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
         >
           <button
             aria-selected="true"
-            class="component component component component text text text size-40 hug size-40 button selected button component"
+            class="component component component component component text text text size-40 hug size-40 button selected button component"
             data-date="1577836800000"
             tabindex="0"
             type="button"
@@ -1241,7 +1241,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="1546300800000"
             tabindex="-1"
             type="button"
@@ -1254,7 +1254,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="1514764800000"
             tabindex="-1"
             type="button"
@@ -1267,7 +1267,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="1483228800000"
             tabindex="-1"
             type="button"
@@ -1280,7 +1280,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="1451606400000"
             tabindex="-1"
             type="button"
@@ -1293,7 +1293,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="1420070400000"
             tabindex="-1"
             type="button"
@@ -1306,7 +1306,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="1388534400000"
             tabindex="-1"
             type="button"
@@ -1319,7 +1319,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="1356998400000"
             tabindex="-1"
             type="button"
@@ -1332,7 +1332,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="1325376000000"
             tabindex="-1"
             type="button"
@@ -1345,7 +1345,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="1293840000000"
             tabindex="-1"
             type="button"
@@ -1358,7 +1358,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="1262304000000"
             tabindex="-1"
             type="button"
@@ -1371,7 +1371,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="1230768000000"
             tabindex="-1"
             type="button"
@@ -1384,7 +1384,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="1199145600000"
             tabindex="-1"
             type="button"
@@ -1397,7 +1397,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="1167609600000"
             tabindex="-1"
             type="button"
@@ -1410,7 +1410,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="1136073600000"
             tabindex="-1"
             type="button"
@@ -1423,7 +1423,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="1104537600000"
             tabindex="-1"
             type="button"
@@ -1436,7 +1436,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="1072915200000"
             tabindex="-1"
             type="button"
@@ -1449,7 +1449,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="1041379200000"
             tabindex="-1"
             type="button"
@@ -1462,7 +1462,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="1009843200000"
             tabindex="-1"
             type="button"
@@ -1475,7 +1475,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="978307200000"
             tabindex="-1"
             type="button"
@@ -1488,7 +1488,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="946684800000"
             tabindex="-1"
             type="button"
@@ -1501,7 +1501,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="915148800000"
             tabindex="-1"
             type="button"
@@ -1514,7 +1514,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="883612800000"
             tabindex="-1"
             type="button"
@@ -1527,7 +1527,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="852076800000"
             tabindex="-1"
             type="button"
@@ -1540,7 +1540,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="820454400000"
             tabindex="-1"
             type="button"
@@ -1553,7 +1553,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="788918400000"
             tabindex="-1"
             type="button"
@@ -1566,7 +1566,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="757382400000"
             tabindex="-1"
             type="button"
@@ -1579,7 +1579,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="725846400000"
             tabindex="-1"
             type="button"
@@ -1592,7 +1592,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="694224000000"
             tabindex="-1"
             type="button"
@@ -1605,7 +1605,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="662688000000"
             tabindex="-1"
             type="button"
@@ -1618,7 +1618,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="631152000000"
             tabindex="-1"
             type="button"
@@ -1631,7 +1631,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="599616000000"
             tabindex="-1"
             type="button"
@@ -1644,7 +1644,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="567993600000"
             tabindex="-1"
             type="button"
@@ -1657,7 +1657,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="536457600000"
             tabindex="-1"
             type="button"
@@ -1670,7 +1670,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="504921600000"
             tabindex="-1"
             type="button"
@@ -1683,7 +1683,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="473385600000"
             tabindex="-1"
             type="button"
@@ -1696,7 +1696,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="441763200000"
             tabindex="-1"
             type="button"
@@ -1709,7 +1709,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="410227200000"
             tabindex="-1"
             type="button"
@@ -1722,7 +1722,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="378691200000"
             tabindex="-1"
             type="button"
@@ -1735,7 +1735,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="347155200000"
             tabindex="-1"
             type="button"
@@ -1748,7 +1748,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="315532800000"
             tabindex="-1"
             type="button"
@@ -1761,7 +1761,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="283996800000"
             tabindex="-1"
             type="button"
@@ -1774,7 +1774,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="252460800000"
             tabindex="-1"
             type="button"
@@ -1787,7 +1787,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="220924800000"
             tabindex="-1"
             type="button"
@@ -1800,7 +1800,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="189302400000"
             tabindex="-1"
             type="button"
@@ -1813,7 +1813,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="157766400000"
             tabindex="-1"
             type="button"
@@ -1826,7 +1826,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="126230400000"
             tabindex="-1"
             type="button"
@@ -1839,7 +1839,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="94694400000"
             tabindex="-1"
             type="button"
@@ -1852,7 +1852,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="63072000000"
             tabindex="-1"
             type="button"
@@ -1865,7 +1865,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="31536000000"
             tabindex="-1"
             type="button"
@@ -1878,7 +1878,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="0"
             tabindex="-1"
             type="button"
@@ -1891,7 +1891,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-31536000000"
             tabindex="-1"
             type="button"
@@ -1904,7 +1904,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-63158400000"
             tabindex="-1"
             type="button"
@@ -1917,7 +1917,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-94694400000"
             tabindex="-1"
             type="button"
@@ -1930,7 +1930,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-126230400000"
             tabindex="-1"
             type="button"
@@ -1943,7 +1943,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-157766400000"
             tabindex="-1"
             type="button"
@@ -1956,7 +1956,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-189388800000"
             tabindex="-1"
             type="button"
@@ -1969,7 +1969,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-220924800000"
             tabindex="-1"
             type="button"
@@ -1982,7 +1982,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-252460800000"
             tabindex="-1"
             type="button"
@@ -1995,7 +1995,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-283996800000"
             tabindex="-1"
             type="button"
@@ -2008,7 +2008,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-315619200000"
             tabindex="-1"
             type="button"
@@ -2021,7 +2021,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-347155200000"
             tabindex="-1"
             type="button"
@@ -2034,7 +2034,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-378691200000"
             tabindex="-1"
             type="button"
@@ -2047,7 +2047,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-410227200000"
             tabindex="-1"
             type="button"
@@ -2060,7 +2060,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-441849600000"
             tabindex="-1"
             type="button"
@@ -2073,7 +2073,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-473385600000"
             tabindex="-1"
             type="button"
@@ -2086,7 +2086,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-504921600000"
             tabindex="-1"
             type="button"
@@ -2099,7 +2099,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-536457600000"
             tabindex="-1"
             type="button"
@@ -2112,7 +2112,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-568080000000"
             tabindex="-1"
             type="button"
@@ -2125,7 +2125,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-599616000000"
             tabindex="-1"
             type="button"
@@ -2138,7 +2138,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-631152000000"
             tabindex="-1"
             type="button"
@@ -2151,7 +2151,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-662688000000"
             tabindex="-1"
             type="button"
@@ -2164,7 +2164,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-694310400000"
             tabindex="-1"
             type="button"
@@ -2177,7 +2177,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-725846400000"
             tabindex="-1"
             type="button"
@@ -2190,7 +2190,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-757382400000"
             tabindex="-1"
             type="button"
@@ -2203,7 +2203,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-788918400000"
             tabindex="-1"
             type="button"
@@ -2216,7 +2216,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-820540800000"
             tabindex="-1"
             type="button"
@@ -2229,7 +2229,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-852076800000"
             tabindex="-1"
             type="button"
@@ -2242,7 +2242,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-883612800000"
             tabindex="-1"
             type="button"
@@ -2255,7 +2255,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-915148800000"
             tabindex="-1"
             type="button"
@@ -2268,7 +2268,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-946771200000"
             tabindex="-1"
             type="button"
@@ -2281,7 +2281,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-978307200000"
             tabindex="-1"
             type="button"
@@ -2294,7 +2294,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-1009843200000"
             tabindex="-1"
             type="button"
@@ -2307,7 +2307,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-1041379200000"
             tabindex="-1"
             type="button"
@@ -2320,7 +2320,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-1073001600000"
             tabindex="-1"
             type="button"
@@ -2333,7 +2333,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-1104537600000"
             tabindex="-1"
             type="button"
@@ -2346,7 +2346,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-1136073600000"
             tabindex="-1"
             type="button"
@@ -2359,7 +2359,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-1167609600000"
             tabindex="-1"
             type="button"
@@ -2372,7 +2372,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-1199232000000"
             tabindex="-1"
             type="button"
@@ -2385,7 +2385,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-1230768000000"
             tabindex="-1"
             type="button"
@@ -2398,7 +2398,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-1262304000000"
             tabindex="-1"
             type="button"
@@ -2411,7 +2411,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-1293840000000"
             tabindex="-1"
             type="button"
@@ -2424,7 +2424,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-1325462400000"
             tabindex="-1"
             type="button"
@@ -2437,7 +2437,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-1356998400000"
             tabindex="-1"
             type="button"
@@ -2450,7 +2450,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-1388534400000"
             tabindex="-1"
             type="button"
@@ -2463,7 +2463,7 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
           </button>
           <button
             aria-selected="false"
-            class="component component component component text text text size-40 hug size-40 button default button component"
+            class="component component component component component text text text size-40 hug size-40 button default button component"
             data-date="-1420070400000"
             tabindex="-1"
             type="button"
@@ -2496,7 +2496,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
         class="component monthYear"
       >
         <button
-          class="component component component component text text text size-40 hug size-40 button filled button month component"
+          class="component component component component component text text text size-40 hug size-40 button filled button month component"
           type="button"
         >
           <span
@@ -2525,7 +2525,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
           </span>
         </button>
         <button
-          class="component component component component text text text size-40 hug size-40 button filled button year component"
+          class="component component component component component text text text size-40 hug size-40 button filled button year component"
           type="button"
         >
           <span
@@ -2616,7 +2616,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2643,7 +2643,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2668,7 +2668,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2693,7 +2693,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2718,7 +2718,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2743,7 +2743,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2768,7 +2768,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2793,7 +2793,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2820,7 +2820,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2845,7 +2845,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2870,7 +2870,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2895,7 +2895,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2920,7 +2920,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2945,7 +2945,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2970,7 +2970,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -2997,7 +2997,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3022,7 +3022,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3047,7 +3047,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3072,7 +3072,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3097,7 +3097,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3122,7 +3122,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3147,7 +3147,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3174,7 +3174,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3199,7 +3199,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3224,7 +3224,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3249,7 +3249,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3274,7 +3274,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3299,7 +3299,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3324,7 +3324,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3351,7 +3351,7 @@ exports[`Calendar Display tests should match selectorView="full" snapshot 1`] =
               tabindex="0"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded selected component"
+                class="component component component component component text text text size-40 hug size-40 day rounded selected component"
                 type="button"
               >
                 <span
@@ -3399,7 +3399,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
       >
         <button
           aria-label="Предыдущий период"
-          class="component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
+          class="component component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
           data-test-id="period-slider-btn-previous-day"
           type="button"
         >
@@ -3432,7 +3432,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
         </span>
         <button
           aria-label="Следующий период"
-          class="component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
+          class="component component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
           data-test-id="period-slider-btn-next-day"
           type="button"
         >
@@ -3521,7 +3521,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3548,7 +3548,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3573,7 +3573,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3598,7 +3598,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3623,7 +3623,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3648,7 +3648,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3673,7 +3673,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3698,7 +3698,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3725,7 +3725,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3750,7 +3750,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3775,7 +3775,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3800,7 +3800,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3825,7 +3825,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3850,7 +3850,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3875,7 +3875,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3902,7 +3902,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3927,7 +3927,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3952,7 +3952,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -3977,7 +3977,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4002,7 +4002,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4027,7 +4027,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4052,7 +4052,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4079,7 +4079,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4104,7 +4104,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4129,7 +4129,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4154,7 +4154,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4179,7 +4179,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4204,7 +4204,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4229,7 +4229,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4256,7 +4256,7 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
               tabindex="0"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded selected component"
+                class="component component component component component text text text size-40 hug size-40 day rounded selected component"
                 type="button"
               >
                 <span
@@ -4302,7 +4302,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
         class="component monthYear"
       >
         <button
-          class="component component component component text text text size-40 hug size-40 button filled button month component"
+          class="component component component component component text text text size-40 hug size-40 button filled button month component"
           type="button"
         >
           <span
@@ -4331,7 +4331,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
           </span>
         </button>
         <button
-          class="component component component component text text text size-40 hug size-40 button filled button year component"
+          class="component component component component component text text text size-40 hug size-40 button filled button year component"
           type="button"
         >
           <span
@@ -4422,7 +4422,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4449,7 +4449,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4474,7 +4474,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4499,7 +4499,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4524,7 +4524,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4549,7 +4549,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4574,7 +4574,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4599,7 +4599,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4626,7 +4626,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4651,7 +4651,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4676,7 +4676,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4701,7 +4701,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4726,7 +4726,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4751,7 +4751,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4776,7 +4776,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4803,7 +4803,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4828,7 +4828,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4853,7 +4853,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4878,7 +4878,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4903,7 +4903,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4928,7 +4928,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4953,7 +4953,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -4980,7 +4980,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -5005,7 +5005,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -5030,7 +5030,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -5055,7 +5055,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -5080,7 +5080,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -5105,7 +5105,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -5130,7 +5130,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="-1"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded component"
+                class="component component component component component text text text size-40 hug size-40 day rounded component"
                 type="button"
               >
                 <span
@@ -5157,7 +5157,7 @@ exports[`Calendar Display tests should match snapshot 1`] = `
               tabindex="0"
             >
               <button
-                class="component component component component text text text size-40 hug size-40 day rounded selected component"
+                class="component component component component component text text text size-40 hug size-40 day rounded selected component"
                 type="button"
               >
                 <span
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 5a9870b242..ab4f7598c0 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,7 +9,7 @@ exports[`PeriodSlider empty PeriodSlider empty PeriodSlider default title snapsh
   >
     <button
       aria-label="Предыдущий период"
-      class="component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
+      class="component component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
       data-test-id="period-slider-btn-previous-day"
       disabled=""
       type="button"
@@ -43,7 +43,7 @@ exports[`PeriodSlider empty PeriodSlider empty PeriodSlider default title snapsh
     </span>
     <button
       aria-label="Следующий период"
-      class="component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
+      class="component component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
       data-test-id="period-slider-btn-next-day"
       disabled=""
       type="button"
@@ -83,7 +83,7 @@ exports[`PeriodSlider empty PeriodSlider empty PeriodSlider specific title snaps
   >
     <button
       aria-label="Предыдущий период"
-      class="component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
+      class="component component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
       data-test-id="period-slider-btn-previous-day"
       disabled=""
       type="button"
@@ -117,7 +117,7 @@ exports[`PeriodSlider empty PeriodSlider empty PeriodSlider specific title snaps
     </span>
     <button
       aria-label="Следующий период"
-      class="component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
+      class="component component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
       data-test-id="period-slider-btn-next-day"
       disabled=""
       type="button"
diff --git a/packages/confirmation-v1/src/__snapshots__/Component.test.tsx.snap b/packages/confirmation-v1/src/__snapshots__/Component.test.tsx.snap
index 1c2eaa191a..5c3bdc3c31 100644
--- a/packages/confirmation-v1/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/confirmation-v1/src/__snapshots__/Component.test.tsx.snap
@@ -136,7 +136,7 @@ exports[`Confirmation Snapshot tests should match snapshot with fatal error 1`]
         Выполните операцию с самого начала
       </span>
       <button
-        class="component component component component secondary secondary secondary size-40 hug size-40 component"
+        class="component component component component component secondary secondary secondary size-40 hug size-40 component"
         type="button"
       >
         <span
diff --git a/packages/confirmation/src/__snapshots__/Component.test.tsx.snap b/packages/confirmation/src/__snapshots__/Component.test.tsx.snap
index c565c0cb47..a553506b96 100644
--- a/packages/confirmation/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/confirmation/src/__snapshots__/Component.test.tsx.snap
@@ -515,7 +515,7 @@ exports[`Confirmation Snapshot tests should match snapshot with FATAL_ERROR scre
         Мы ограничили следующие попытки ввода, потому что код был введён неверно больше 5 раз.
       </span>
       <button
-        class="component component component component secondary secondary secondary size-48 hug size-48 button component"
+        class="component component component component component secondary secondary secondary size-48 hug size-48 button component"
         type="button"
       >
         <span
@@ -595,7 +595,7 @@ exports[`Confirmation Snapshot tests should match snapshot with HINT screen 1`]
         Если номер не меняли, попробуйте запросить код позже — возможно, перегружен сервис отправки уведомлений.
       </span>
       <button
-        class="component component component component secondary secondary secondary size-48 hug size-48 hintButton component"
+        class="component component component component component secondary secondary secondary size-48 hug size-48 hintButton component"
         type="button"
       >
         <span
@@ -676,7 +676,7 @@ exports[`Confirmation Snapshot tests should match snapshot with TEMP_BLOCK_OVER
         Теперь можно запросить новый код
       </span>
       <button
-        class="component component component component secondary secondary secondary size-48 hug size-48 button component"
+        class="component component component component component secondary secondary secondary size-48 hug size-48 button component"
         type="button"
       >
         <span
diff --git a/packages/custom-button/src/__snapshots__/Component.test.tsx.snap b/packages/custom-button/src/__snapshots__/Component.test.tsx.snap
index a73254731b..95f6292e50 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 component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+        class="component component component component component primary primary primary size-56 hug size-56 iconOnly 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 component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+      class="component component component component component primary primary primary size-56 hug size-56 iconOnly 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 component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+        class="component component component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+        class="component component component component component primary primary primary size-56 hug size-56 iconOnly 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 component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+      class="component component component component component primary primary primary size-56 hug size-56 iconOnly 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 component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+        class="component component component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+        class="component component component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+        class="component component component component component primary primary primary size-56 hug size-56 iconOnly 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 component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+      class="component component component component component primary primary primary size-56 hug size-56 iconOnly 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 component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+        class="component component component component component primary primary primary size-56 hug size-56 iconOnly 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 component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+      class="component component component component component primary primary primary size-56 hug size-56 iconOnly 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 component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+        class="component component component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+        class="component component component component component primary primary primary size-56 hug size-56 iconOnly 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 component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+      class="component component component component component primary primary primary size-56 hug size-56 iconOnly 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 component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+        class="component component component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+        class="component component component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+        class="component component component component component primary primary primary size-56 hug size-56 iconOnly 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 component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+      class="component component component component component primary primary primary size-56 hug size-56 iconOnly 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 component component component primary primary primary size-56 hug size-56 iconOnly customButton border black darkening disableType-default component"
+        class="component component component component component primary primary primary size-56 hug size-56 iconOnly 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 component component component primary primary primary size-56 hug size-56 iconOnly customButton border black darkening disableType-default component"
+      class="component component component component component primary primary primary size-56 hug size-56 iconOnly 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 component component component primary primary primary size-56 hug size-56 iconOnly customButton border black darkening disableType-default component"
+        class="component component component component component primary primary primary size-56 hug size-56 iconOnly customButton border black darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component component component component primary primary primary size-56 hug size-56 iconOnly customButton border black darkening disableType-default component"
+        class="component component component component component primary primary primary size-56 hug size-56 iconOnly 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 component component component primary primary primary size-56 hug size-56 iconOnly customButton border black darkening disableType-default component"
+      class="component component component component component primary primary primary size-56 hug size-56 iconOnly 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 component component component primary primary primary size-56 hug size-56 iconOnly customButton border black darkening disableType-default component"
+        class="component component component component component primary primary primary size-56 hug size-56 iconOnly customButton border black darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component component component component primary primary primary size-56 hug size-56 iconOnly customButton border black darkening disableType-default component"
+        class="component component component component component primary primary primary size-56 hug size-56 iconOnly customButton border black darkening disableType-default component"
         style="background: rgb(255, 69, 195);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component component component component primary primary primary size-56 hug size-56 iconOnly customButton border black darkening disableType-default component"
+        class="component component component component component primary primary primary size-56 hug size-56 iconOnly 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 component component component primary primary primary size-56 hug size-56 iconOnly customButton border black darkening disableType-default component"
+      class="component component component component component primary primary primary size-56 hug size-56 iconOnly 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 component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+        class="component component component component component primary primary primary size-56 hug size-56 iconOnly 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 component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+      class="component component component component component primary primary primary size-56 hug size-56 iconOnly 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 component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+        class="component component component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
         style="background: rgb(0, 255, 0);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+        class="component component component component component primary primary primary size-56 hug size-56 iconOnly 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 component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+      class="component component component component component primary primary primary size-56 hug size-56 iconOnly 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 component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+        class="component component component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
         style="background: rgb(0, 255, 0);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+        class="component component component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
         style="background: rgb(0, 255, 0);"
         type="button"
       />
     </div>
     <div>
       <button
-        class="component component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+        class="component component component component component primary primary primary size-56 hug size-56 iconOnly 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 component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
+      class="component component component component component primary primary primary size-56 hug size-56 iconOnly 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 component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
+        class="component loading component component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
         style="background: rgb(255, 69, 195);"
         type="button"
       >
@@ -1011,7 +1011,7 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 1`] =
   </body>,
   "container": <div>
     <button
-      class="component component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
+      class="component loading component component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
       style="background: rgb(255, 69, 195);"
       type="button"
     >
@@ -1113,7 +1113,7 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 2`] =
   "baseElement": <body>
     <div>
       <button
-        class="component component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
+        class="component loading component component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
         style="background: rgb(255, 69, 195);"
         type="button"
       >
@@ -1157,7 +1157,7 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 2`] =
     </div>
     <div>
       <button
-        class="component component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
+        class="component loading component component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
         style="background: rgb(255, 69, 195);"
         type="button"
       >
@@ -1202,7 +1202,7 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 2`] =
   </body>,
   "container": <div>
     <button
-      class="component component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
+      class="component loading component component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
       style="background: rgb(255, 69, 195);"
       type="button"
     >
@@ -1304,7 +1304,7 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 3`] =
   "baseElement": <body>
     <div>
       <button
-        class="component component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
+        class="component loading component component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
         style="background: rgb(255, 69, 195);"
         type="button"
       >
@@ -1348,7 +1348,7 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 3`] =
     </div>
     <div>
       <button
-        class="component component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
+        class="component loading component component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
         style="background: rgb(255, 69, 195);"
         type="button"
       >
@@ -1392,7 +1392,7 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 3`] =
     </div>
     <div>
       <button
-        class="component component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
+        class="component loading component component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
         style="background: rgb(255, 69, 195);"
         type="button"
       >
@@ -1437,7 +1437,7 @@ exports[`CustomButton Snapshots tests should render loader if loading pass 3`] =
   </body>,
   "container": <div>
     <button
-      class="component component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
+      class="component loading component component component component primary primary primary size-56 hug size-56 iconOnly loading customButton border white darkening disableType-default customLoading component"
       style="background: rgb(255, 69, 195);"
       type="button"
     >
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 66444a30c7..a9df42c68f 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 component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border white darkening disableType-default component"
+      class="component block component component component component primary primary primary size-56 hug size-56 withRightAddons customButton border white darkening disableType-default component"
       id="downshift-:r0:-input"
       selectedmultiple=""
       style="background: rgb(255, 69, 195);"
@@ -67,7 +67,7 @@ exports[`Snapshots tests should display correctly 2`] = `
     <button
       aria-controls="downshift-:r4:-menu"
       aria-labelledby="downshift-:r4:-label"
-      class="component component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border white darkening disableType-default component"
+      class="component block component component component component primary primary primary size-56 hug size-56 withRightAddons customButton border white darkening disableType-default component"
       id="downshift-:r4:-input"
       selectedmultiple=""
       style="background: rgb(255, 69, 195);"
@@ -123,7 +123,7 @@ exports[`Snapshots tests should display correctly 3`] = `
       aria-controls="downshift-:r8:-menu"
       aria-labelledby="downshift-:r8:-label"
       arrow="[object Object]"
-      class="component component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border white darkening disableType-default component"
+      class="component block component component component component primary primary primary size-56 hug size-56 withRightAddons customButton border white darkening disableType-default component"
       formcontrolcomponent="[object Object]"
       id="downshift-:r8:-input"
       selectedmultiple=""
@@ -179,7 +179,7 @@ exports[`Snapshots tests should display opened correctly 1`] = `
     <button
       aria-controls="downshift-:r3:-menu"
       aria-labelledby="downshift-:r3:-label"
-      class="component component component component primary primary primary size-56 hug size-56 block iconOnly customButton border white darkening disableType-default component"
+      class="component block component component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
       id="downshift-:r3:-input"
       selectedmultiple=""
       style="background: rgb(255, 69, 195);"
@@ -582,7 +582,7 @@ exports[`Snapshots tests should display opened correctly 3`] = `
     <button
       aria-controls="downshift-:r7:-menu"
       aria-labelledby="downshift-:r7:-label"
-      class="component component component component primary primary primary size-56 hug size-56 block iconOnly customButton border white darkening disableType-default component"
+      class="component block component component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
       id="downshift-:r7:-input"
       selectedmultiple=""
       style="background: rgb(255, 69, 195);"
@@ -985,7 +985,7 @@ exports[`Snapshots tests should display opened correctly 5`] = `
     <button
       aria-controls="downshift-:rb:-menu"
       aria-labelledby="downshift-:rb:-label"
-      class="component component component component primary primary primary size-56 hug size-56 block iconOnly customButton border white darkening disableType-default component"
+      class="component block component component component component primary primary primary size-56 hug size-56 iconOnly customButton border white darkening disableType-default component"
       id="downshift-:rb:-input"
       selectedmultiple=""
       style="background: rgb(255, 69, 195);"
@@ -1394,7 +1394,7 @@ exports[`Snapshots tests should render black color content 1`] = `
         <button
           aria-controls="downshift-:r2:-menu"
           aria-labelledby="downshift-:r2:-label"
-          class="component component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border black darkening disableType-default component"
+          class="component block component component component component primary primary primary size-56 hug size-56 withRightAddons customButton border black darkening disableType-default component"
           id="downshift-:r2:-input"
           selectedmultiple=""
           style="background: rgb(255, 69, 195);"
@@ -1447,7 +1447,7 @@ exports[`Snapshots tests should render black color content 1`] = `
       <button
         aria-controls="downshift-:r2:-menu"
         aria-labelledby="downshift-:r2:-label"
-        class="component component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border black darkening disableType-default component"
+        class="component block component component component component primary primary primary size-56 hug size-56 withRightAddons customButton border black darkening disableType-default component"
         id="downshift-:r2:-input"
         selectedmultiple=""
         style="background: rgb(255, 69, 195);"
@@ -1560,7 +1560,7 @@ exports[`Snapshots tests should render black color content 2`] = `
         <button
           aria-controls="downshift-:r6:-menu"
           aria-labelledby="downshift-:r6:-label"
-          class="component component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border black darkening disableType-default component"
+          class="component block component component component component primary primary primary size-56 hug size-56 withRightAddons customButton border black darkening disableType-default component"
           id="downshift-:r6:-input"
           selectedmultiple=""
           style="background: rgb(255, 69, 195);"
@@ -1613,7 +1613,7 @@ exports[`Snapshots tests should render black color content 2`] = `
       <button
         aria-controls="downshift-:r6:-menu"
         aria-labelledby="downshift-:r6:-label"
-        class="component component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border black darkening disableType-default component"
+        class="component block component component component component primary primary primary size-56 hug size-56 withRightAddons customButton border black darkening disableType-default component"
         id="downshift-:r6:-input"
         selectedmultiple=""
         style="background: rgb(255, 69, 195);"
@@ -1727,7 +1727,7 @@ exports[`Snapshots tests should render black color content 3`] = `
           aria-controls="downshift-:ra:-menu"
           aria-labelledby="downshift-:ra:-label"
           arrow="[object Object]"
-          class="component component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border black darkening disableType-default component"
+          class="component block component component component component primary primary primary size-56 hug size-56 withRightAddons customButton border black darkening disableType-default component"
           formcontrolcomponent="[object Object]"
           id="downshift-:ra:-input"
           selectedmultiple=""
@@ -1782,7 +1782,7 @@ exports[`Snapshots tests should render black color content 3`] = `
         aria-controls="downshift-:ra:-menu"
         aria-labelledby="downshift-:ra:-label"
         arrow="[object Object]"
-        class="component component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border black darkening disableType-default component"
+        class="component block component component component component primary primary primary size-56 hug size-56 withRightAddons customButton border black darkening disableType-default component"
         formcontrolcomponent="[object Object]"
         id="downshift-:ra:-input"
         selectedmultiple=""
@@ -1896,7 +1896,7 @@ exports[`Snapshots tests should render custom background color 1`] = `
         <button
           aria-controls="downshift-:r1:-menu"
           aria-labelledby="downshift-:r1:-label"
-          class="component component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border white darkening disableType-default component"
+          class="component block component component component component primary primary primary size-56 hug size-56 withRightAddons customButton border white darkening disableType-default component"
           id="downshift-:r1:-input"
           selectedmultiple=""
           style="background: rgb(0, 255, 0);"
@@ -1949,7 +1949,7 @@ exports[`Snapshots tests should render custom background color 1`] = `
       <button
         aria-controls="downshift-:r1:-menu"
         aria-labelledby="downshift-:r1:-label"
-        class="component component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border white darkening disableType-default component"
+        class="component block component component component component primary primary primary size-56 hug size-56 withRightAddons customButton border white darkening disableType-default component"
         id="downshift-:r1:-input"
         selectedmultiple=""
         style="background: rgb(0, 255, 0);"
@@ -2062,7 +2062,7 @@ exports[`Snapshots tests should render custom background color 2`] = `
         <button
           aria-controls="downshift-:r5:-menu"
           aria-labelledby="downshift-:r5:-label"
-          class="component component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border white darkening disableType-default component"
+          class="component block component component component component primary primary primary size-56 hug size-56 withRightAddons customButton border white darkening disableType-default component"
           id="downshift-:r5:-input"
           selectedmultiple=""
           style="background: rgb(0, 255, 0);"
@@ -2115,7 +2115,7 @@ exports[`Snapshots tests should render custom background color 2`] = `
       <button
         aria-controls="downshift-:r5:-menu"
         aria-labelledby="downshift-:r5:-label"
-        class="component component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border white darkening disableType-default component"
+        class="component block component component component component primary primary primary size-56 hug size-56 withRightAddons customButton border white darkening disableType-default component"
         id="downshift-:r5:-input"
         selectedmultiple=""
         style="background: rgb(0, 255, 0);"
@@ -2229,7 +2229,7 @@ exports[`Snapshots tests should render custom background color 3`] = `
           aria-controls="downshift-:r9:-menu"
           aria-labelledby="downshift-:r9:-label"
           arrow="[object Object]"
-          class="component component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border white darkening disableType-default component"
+          class="component block component component component component primary primary primary size-56 hug size-56 withRightAddons customButton border white darkening disableType-default component"
           formcontrolcomponent="[object Object]"
           id="downshift-:r9:-input"
           selectedmultiple=""
@@ -2284,7 +2284,7 @@ exports[`Snapshots tests should render custom background color 3`] = `
         aria-controls="downshift-:r9:-menu"
         aria-labelledby="downshift-:r9:-label"
         arrow="[object Object]"
-        class="component component component component primary primary primary size-56 hug size-56 block withRightAddons customButton border white darkening disableType-default component"
+        class="component block component component component component primary primary primary size-56 hug size-56 withRightAddons customButton border white darkening disableType-default component"
         formcontrolcomponent="[object Object]"
         id="downshift-:r9:-input"
         selectedmultiple=""
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 7008bd6fdd..c85ee19d94 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,7 +51,7 @@ exports[`FileUploadItemV1 Snapshots tests should match snapshot 1`] = `
         <a
           aria-disabled="false"
           aria-label="скачать"
-          class="component component component component text text text size-48 hug size-48 cc-icon-button download primary component border-24 component"
+          class="component component component component component text text text size-48 hug size-48 cc-icon-button download primary component border-24 component"
           download="новое_название_файла"
           href="/link"
         >
@@ -79,7 +79,7 @@ exports[`FileUploadItemV1 Snapshots tests should match snapshot 1`] = `
         </a>
         <button
           aria-label="удалить"
-          class="component component component component text text text size-48 hug size-48 cc-icon-button delete primary component border-24 component"
+          class="component component component component component text text text size-48 hug size-48 cc-icon-button delete primary component border-24 component"
           type="button"
         >
           <span
@@ -154,7 +154,7 @@ exports[`FileUploadItemV1 Snapshots tests should match snapshot 1`] = `
       <a
         aria-disabled="false"
         aria-label="скачать"
-        class="component component component component text text text size-48 hug size-48 cc-icon-button download primary component border-24 component"
+        class="component component component component component text text text size-48 hug size-48 cc-icon-button download primary component border-24 component"
         download="новое_название_файла"
         href="/link"
       >
@@ -182,7 +182,7 @@ exports[`FileUploadItemV1 Snapshots tests should match snapshot 1`] = `
       </a>
       <button
         aria-label="удалить"
-        class="component component component component text text text size-48 hug size-48 cc-icon-button delete primary component border-24 component"
+        class="component component component component component text text text size-48 hug size-48 cc-icon-button delete primary component border-24 component"
         type="button"
       >
         <span
diff --git a/packages/icon-button/src/__snapshots__/Component.test.tsx.snap b/packages/icon-button/src/__snapshots__/Component.test.tsx.snap
index ecdaf6f86e..67a9aa50b6 100644
--- a/packages/icon-button/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/icon-button/src/__snapshots__/Component.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`IconButton Href tests should set \`href\` attribute and be link 1`] = `
     <div>
       <a
         aria-disabled="false"
-        class="component component component component text text text size-48 hug size-48 cc-icon-button primary component border-48 component"
+        class="component component component component component text text text size-48 hug size-48 cc-icon-button primary component border-48 component"
         data-test-id="test-id"
         href="http://example.com"
       >
@@ -38,7 +38,7 @@ exports[`IconButton Href tests should set \`href\` attribute and be link 1`] = `
   "container": <div>
     <a
       aria-disabled="false"
-      class="component component component component text text text size-48 hug size-48 cc-icon-button primary component border-48 component"
+      class="component component component component component text text text size-48 hug size-48 cc-icon-button primary component border-48 component"
       data-test-id="test-id"
       href="http://example.com"
     >
@@ -125,7 +125,7 @@ exports[`IconButton Snapshots tests should match snapshot 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="component component component component text text text size-48 hug size-48 cc-icon-button primary component border-48 component"
+        class="component component component component component text text text size-48 hug size-48 cc-icon-button primary component border-48 component"
         type="button"
       >
         <span
@@ -154,7 +154,7 @@ exports[`IconButton Snapshots tests should match snapshot 1`] = `
   </body>,
   "container": <div>
     <button
-      class="component component component component text text text size-48 hug size-48 cc-icon-button primary component border-48 component"
+      class="component component component component component text text text size-48 hug size-48 cc-icon-button primary component border-48 component"
       type="button"
     >
       <span
diff --git a/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap b/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap
index 005cba9f19..7e715aa09c 100644
--- a/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap
@@ -140,7 +140,7 @@ exports[`InputAutocompleteMobile Snapshots tests should match snapshot in open s
                           >
                             <button
                               aria-label="закрыть"
-                              class="component component component component text text text size-48 hug size-48 cc-icon-button button button mobile primary component border-32 component"
+                              class="component component component component component text text text size-48 hug size-48 cc-icon-button button button mobile primary component border-32 component"
                               type="button"
                             >
                               <span
@@ -380,7 +380,7 @@ exports[`InputAutocompleteMobile Snapshots tests should match snapshot in open s
                             tabindex="0"
                           >
                             <button
-                              class="component component component component secondary secondary secondary size-56 hug size-56 button component"
+                              class="component component component component component secondary secondary secondary size-56 hug size-56 button component"
                               type="button"
                             >
                               <span
@@ -390,7 +390,7 @@ exports[`InputAutocompleteMobile Snapshots tests should match snapshot in open s
                               </span>
                             </button>
                             <button
-                              class="component component component component primary primary primary size-56 hug size-56 button component"
+                              class="component component component component component primary primary primary size-56 hug size-56 button component"
                               type="button"
                             >
                               <span
diff --git a/packages/modal/src/__snapshots__/Component.test.tsx.snap b/packages/modal/src/__snapshots__/Component.test.tsx.snap
index 5ad19be056..2b70769763 100644
--- a/packages/modal/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/modal/src/__snapshots__/Component.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`ModalDesktop snapshots tests should match snapshot 1`] = `
             >
               <button
                 aria-label="назад"
-                class="component component component component text text text size-48 hug size-48 component component component"
+                class="component component component component component text text text size-48 hug size-48 component component component"
                 type="button"
               >
                 <span
@@ -74,7 +74,7 @@ exports[`ModalDesktop snapshots tests should match snapshot 1`] = `
               >
                 <button
                   aria-label="закрыть"
-                  class="component component component component text text text size-48 hug size-48 cc-icon-button button button primary component border-48 component"
+                  class="component component component component component text text text size-48 hug size-48 cc-icon-button button button primary component border-48 component"
                   type="button"
                 >
                   <span
@@ -161,7 +161,7 @@ exports[`ModalMobile snapshots tests should match snapshot 1`] = `
             >
               <button
                 aria-label="назад"
-                class="component component component component text text text size-32 hug size-32 component component mobileComponent component"
+                class="component component component component component text text text size-32 hug size-32 component component mobileComponent component"
                 type="button"
               >
                 <span
@@ -208,7 +208,7 @@ exports[`ModalMobile snapshots tests should match snapshot 1`] = `
               >
                 <button
                   aria-label="закрыть"
-                  class="component component component component text text text size-48 hug size-48 cc-icon-button button button mobile primary component border-32 component"
+                  class="component component component component component text text text size-48 hug size-48 cc-icon-button button button mobile primary component border-32 component"
                   type="button"
                 >
                   <span
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 a3aed89e0c..dfd75c6a81 100644
--- a/packages/navigation-bar-private/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/navigation-bar-private/src/__snapshots__/Component.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`Navigation Bar Snapshots tests should match snapshot 1`] = `
           >
             <button
               aria-label="назад"
-              class="component component component component text text text size-48 hug size-48 component component component"
+              class="component component component component component text text text size-48 hug size-48 component component component"
               data-test-id="navigation-bar-dti-back-button"
               type="button"
             >
@@ -66,7 +66,7 @@ exports[`Navigation Bar Snapshots tests should match snapshot 1`] = `
             >
               <button
                 aria-label="закрыть"
-                class="component component component component text text text size-48 hug size-48 cc-icon-button button button primary component border-48 component"
+                class="component component component component component text text text size-48 hug size-48 cc-icon-button button button primary component border-48 component"
                 data-test-id="navigation-bar-dti-closer"
                 type="button"
               >
diff --git a/packages/notification-manager/src/__snapshots__/component.test.tsx.snap b/packages/notification-manager/src/__snapshots__/component.test.tsx.snap
index d4e0264820..8c5034c880 100644
--- a/packages/notification-manager/src/__snapshots__/component.test.tsx.snap
+++ b/packages/notification-manager/src/__snapshots__/component.test.tsx.snap
@@ -57,7 +57,7 @@ exports[`NotificationManager Snapshots tests should match snapshot 1`] = `
             >
               <button
                 aria-label="закрыть"
-                class="component component component component text text text size-48 hug size-48 cc-icon-button closeButton closeButton primary component border-48 component"
+                class="component component component component component text text text size-48 hug size-48 cc-icon-button closeButton closeButton primary component border-48 component"
                 type="button"
               >
                 <span
@@ -120,7 +120,7 @@ exports[`NotificationManager Snapshots tests should match snapshot 1`] = `
             >
               <button
                 aria-label="закрыть"
-                class="component component component component text text text size-48 hug size-48 cc-icon-button closeButton closeButton primary component border-48 component"
+                class="component component component component component text text text size-48 hug size-48 cc-icon-button closeButton closeButton primary component border-48 component"
                 type="button"
               >
                 <span
@@ -183,7 +183,7 @@ exports[`NotificationManager Snapshots tests should match snapshot 1`] = `
             >
               <button
                 aria-label="закрыть"
-                class="component component component component text text text size-48 hug size-48 cc-icon-button closeButton closeButton primary component border-48 component"
+                class="component component component component component text text text size-48 hug size-48 cc-icon-button closeButton closeButton primary component border-48 component"
                 type="button"
               >
                 <span
diff --git a/packages/notification/src/__snapshots__/Component.test.tsx.snap b/packages/notification/src/__snapshots__/Component.test.tsx.snap
index e4212619c1..8871e57133 100644
--- a/packages/notification/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/notification/src/__snapshots__/Component.test.tsx.snap
@@ -67,7 +67,7 @@ exports[`Notification Snapshots tests should match snapshot 1`] = `
           >
             <button
               aria-label="закрыть"
-              class="component component component component text text text size-48 hug size-48 cc-icon-button closeButton closeButton primary component border-48 component"
+              class="component component component component component text text text size-48 hug size-48 cc-icon-button closeButton closeButton primary component border-48 component"
               type="button"
             >
               <span
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 53d04ecca2..26587e895c 100644
--- a/packages/pass-code-v1/src/__snapshots__/component.test.tsx.snap
+++ b/packages/pass-code-v1/src/__snapshots__/component.test.tsx.snap
@@ -39,7 +39,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with code length 1`] =
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -53,7 +53,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with code length 1`] =
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -67,7 +67,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with code length 1`] =
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -81,7 +81,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with code length 1`] =
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -95,7 +95,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with code length 1`] =
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -109,7 +109,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with code length 1`] =
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -123,7 +123,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with code length 1`] =
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -137,7 +137,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with code length 1`] =
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -151,7 +151,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with code length 1`] =
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -166,7 +166,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with code length 1`] =
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 iconOnly button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 iconOnly button secondary digit component"
           type="button"
         >
           0
@@ -206,7 +206,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with error prop 1`] = `
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -220,7 +220,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with error prop 1`] = `
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -234,7 +234,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with error prop 1`] = `
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -248,7 +248,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with error prop 1`] = `
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -262,7 +262,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with error prop 1`] = `
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -276,7 +276,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with error prop 1`] = `
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -290,7 +290,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with error prop 1`] = `
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -304,7 +304,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with error prop 1`] = `
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -318,7 +318,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with error prop 1`] = `
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -333,7 +333,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with error prop 1`] = `
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 iconOnly button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 iconOnly button secondary digit component"
           type="button"
         >
           0
@@ -343,7 +343,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with error prop 1`] = `
         class="component"
       >
         <button
-          class="component component component component text text text size-56 hug size-56 button text component"
+          class="component component component component component text text text size-56 hug size-56 button text component"
           type="button"
         >
           <span
@@ -400,7 +400,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with unknown code lengt
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -414,7 +414,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with unknown code lengt
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -428,7 +428,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with unknown code lengt
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -442,7 +442,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with unknown code lengt
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -456,7 +456,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with unknown code lengt
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -470,7 +470,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with unknown code lengt
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -484,7 +484,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with unknown code lengt
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -498,7 +498,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with unknown code lengt
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -512,7 +512,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with unknown code lengt
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
           type="button"
         >
           <span
@@ -527,7 +527,7 @@ exports[`PassCodeV1 Snapshot tests should match snapshot with unknown code lengt
         class="component"
       >
         <button
-          class="component component component component secondary secondary secondary size-56 hug size-56 iconOnly button secondary digit component"
+          class="component component component component component secondary secondary secondary size-56 hug size-56 iconOnly button secondary digit component"
           type="button"
         >
           0
diff --git a/packages/pass-code/src/__snapshots__/component.test.tsx.snap b/packages/pass-code/src/__snapshots__/component.test.tsx.snap
index 1f0d7d5af5..4f34115502 100644
--- a/packages/pass-code/src/__snapshots__/component.test.tsx.snap
+++ b/packages/pass-code/src/__snapshots__/component.test.tsx.snap
@@ -53,7 +53,7 @@ exports[`PassCode Snapshot tests should match snapshot with code length 1`] = `
       class="component"
     >
       <button
-        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -63,7 +63,7 @@ exports[`PassCode Snapshot tests should match snapshot with code length 1`] = `
         </span>
       </button>
       <button
-        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -73,7 +73,7 @@ exports[`PassCode Snapshot tests should match snapshot with code length 1`] = `
         </span>
       </button>
       <button
-        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -83,7 +83,7 @@ exports[`PassCode Snapshot tests should match snapshot with code length 1`] = `
         </span>
       </button>
       <button
-        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -93,7 +93,7 @@ exports[`PassCode Snapshot tests should match snapshot with code length 1`] = `
         </span>
       </button>
       <button
-        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -103,7 +103,7 @@ exports[`PassCode Snapshot tests should match snapshot with code length 1`] = `
         </span>
       </button>
       <button
-        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -113,7 +113,7 @@ exports[`PassCode Snapshot tests should match snapshot with code length 1`] = `
         </span>
       </button>
       <button
-        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -123,7 +123,7 @@ exports[`PassCode Snapshot tests should match snapshot with code length 1`] = `
         </span>
       </button>
       <button
-        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -133,7 +133,7 @@ exports[`PassCode Snapshot tests should match snapshot with code length 1`] = `
         </span>
       </button>
       <button
-        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -144,7 +144,7 @@ exports[`PassCode Snapshot tests should match snapshot with code length 1`] = `
       </button>
       <div />
       <button
-        class="component component component component secondary secondary secondary size-56 hug size-56 iconOnly button secondary digit component"
+        class="component component component component component secondary secondary secondary size-56 hug size-56 iconOnly button secondary digit component"
         type="button"
       >
         0
@@ -179,7 +179,7 @@ exports[`PassCode Snapshot tests should match snapshot with unknown code length
       class="component"
     >
       <button
-        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -189,7 +189,7 @@ exports[`PassCode Snapshot tests should match snapshot with unknown code length
         </span>
       </button>
       <button
-        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -199,7 +199,7 @@ exports[`PassCode Snapshot tests should match snapshot with unknown code length
         </span>
       </button>
       <button
-        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -209,7 +209,7 @@ exports[`PassCode Snapshot tests should match snapshot with unknown code length
         </span>
       </button>
       <button
-        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -219,7 +219,7 @@ exports[`PassCode Snapshot tests should match snapshot with unknown code length
         </span>
       </button>
       <button
-        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -229,7 +229,7 @@ exports[`PassCode Snapshot tests should match snapshot with unknown code length
         </span>
       </button>
       <button
-        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -239,7 +239,7 @@ exports[`PassCode Snapshot tests should match snapshot with unknown code length
         </span>
       </button>
       <button
-        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -249,7 +249,7 @@ exports[`PassCode Snapshot tests should match snapshot with unknown code length
         </span>
       </button>
       <button
-        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -259,7 +259,7 @@ exports[`PassCode Snapshot tests should match snapshot with unknown code length
         </span>
       </button>
       <button
-        class="component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
         type="button"
       >
         <span
@@ -270,7 +270,7 @@ exports[`PassCode Snapshot tests should match snapshot with unknown code length
       </button>
       <div />
       <button
-        class="component component component component secondary secondary secondary size-56 hug size-56 iconOnly button secondary digit component"
+        class="component component component component component secondary secondary secondary size-56 hug size-56 iconOnly button secondary digit component"
         type="button"
       >
         0
diff --git a/packages/password-input/src/__snapshots__/component.test.tsx.snap b/packages/password-input/src/__snapshots__/component.test.tsx.snap
index 9dff03d918..fffd06da45 100644
--- a/packages/password-input/src/__snapshots__/component.test.tsx.snap
+++ b/packages/password-input/src/__snapshots__/component.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`PasswordInput snapshots tests should match snapshot 1`] = `
           class="addons rightAddons rightAddons size-48"
         >
           <button
-            class="component component component component text text text size-48 hug size-48 cc-icon-button eye secondary component border-24 component"
+            class="component component component component component text text text size-48 hug size-48 cc-icon-button eye secondary component border-24 component"
             title="Показать"
             type="button"
           >
diff --git a/packages/picker-button/src/__snapshots__/Component.test.tsx.snap b/packages/picker-button/src/__snapshots__/Component.test.tsx.snap
index 5a32b42f0c..a5273f6f28 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 component component component secondary secondary secondary size-56 hug size-56 block withRightAddons component"
+        class="component block component component component component secondary secondary secondary size-56 hug size-56 withRightAddons component"
         id="downshift-:r0:-input"
         tabindex="0"
         type="button"
@@ -68,7 +68,7 @@ exports[`Snapshots tests should display correctly 2`] = `
       <button
         aria-controls="downshift-:r2:-menu"
         aria-labelledby="downshift-:r2:-label"
-        class="component component component component secondary secondary secondary size-56 hug size-56 block withRightAddons component"
+        class="component block component component component component secondary secondary secondary size-56 hug size-56 withRightAddons component"
         id="downshift-:r2:-input"
         tabindex="0"
         type="button"
@@ -123,7 +123,7 @@ exports[`Snapshots tests should display correctly 3`] = `
       <button
         aria-controls="downshift-:r4:-menu"
         aria-labelledby="downshift-:r4:-label"
-        class="component component component component secondary secondary secondary size-56 hug size-56 block withRightAddons component"
+        class="component block component component component component secondary secondary secondary size-56 hug size-56 withRightAddons component"
         id="downshift-:r4:-input"
         tabindex="0"
         type="button"
@@ -178,7 +178,7 @@ exports[`Snapshots tests should display opened correctly 1`] = `
       <button
         aria-controls="downshift-:r1:-menu"
         aria-labelledby="downshift-:r1:-label"
-        class="component component component component secondary secondary secondary size-56 hug size-56 block iconOnly component"
+        class="component block component component component component secondary secondary secondary size-56 hug size-56 iconOnly component"
         id="downshift-:r1:-input"
         tabindex="0"
         type="button"
@@ -223,7 +223,7 @@ exports[`Snapshots tests should display opened correctly 2`] = `
       <button
         aria-controls="downshift-:r1:-menu"
         aria-labelledby="downshift-:r1:-label"
-        class="component component component component secondary secondary secondary size-56 hug size-56 block iconOnly component"
+        class="component block component component component component secondary secondary secondary size-56 hug size-56 iconOnly component"
         id="downshift-:r1:-input"
         tabindex="0"
         type="button"
@@ -268,7 +268,7 @@ exports[`Snapshots tests should display opened correctly 3`] = `
       <button
         aria-controls="downshift-:r3:-menu"
         aria-labelledby="downshift-:r3:-label"
-        class="component component component component secondary secondary secondary size-56 hug size-56 block iconOnly component"
+        class="component block component component component component secondary secondary secondary size-56 hug size-56 iconOnly component"
         id="downshift-:r3:-input"
         tabindex="0"
         type="button"
@@ -359,7 +359,7 @@ exports[`Snapshots tests should display opened correctly 4`] = `
                         >
                           <button
                             aria-label="закрыть"
-                            class="component component component component text text text size-48 hug size-48 cc-icon-button button button mobile primary component border-32 component"
+                            class="component component component component component text text text size-48 hug size-48 cc-icon-button button button mobile primary component border-32 component"
                             type="button"
                           >
                             <span
@@ -1382,7 +1382,7 @@ exports[`Snapshots tests should display opened correctly 5`] = `
       <button
         aria-controls="downshift-:r5:-menu"
         aria-labelledby="downshift-:r5:-label"
-        class="component component component component secondary secondary secondary size-56 hug size-56 block iconOnly component"
+        class="component block component component component component secondary secondary secondary size-56 hug size-56 iconOnly component"
         id="downshift-:r5:-input"
         tabindex="0"
         type="button"
@@ -1473,7 +1473,7 @@ exports[`Snapshots tests should display opened correctly 6`] = `
                         >
                           <button
                             aria-label="закрыть"
-                            class="component component component component text text text size-48 hug size-48 cc-icon-button button button mobile primary component border-32 component"
+                            class="component component component component component text text text size-48 hug size-48 cc-icon-button button button mobile primary component border-32 component"
                             type="button"
                           >
                             <span
diff --git a/packages/side-panel/src/__snapshots__/Component.test.tsx.snap b/packages/side-panel/src/__snapshots__/Component.test.tsx.snap
index f94bd86c50..5ba617100d 100644
--- a/packages/side-panel/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/side-panel/src/__snapshots__/Component.test.tsx.snap
@@ -30,7 +30,7 @@ exports[`SidePanelDesktop snapshots tests should match snapshot 1`] = `
               >
                 <button
                   aria-label="назад"
-                  class="component component component component text text text size-48 hug size-48 component component component"
+                  class="component component component component component text text text size-48 hug size-48 component component component"
                   type="button"
                 >
                   <span
@@ -77,7 +77,7 @@ exports[`SidePanelDesktop snapshots tests should match snapshot 1`] = `
                 >
                   <button
                     aria-label="закрыть"
-                    class="component component component component text text text size-48 hug size-48 cc-icon-button button button primary component border-48 component"
+                    class="component component component component component text text text size-48 hug size-48 cc-icon-button button button primary component border-48 component"
                     type="button"
                   >
                     <span
@@ -168,7 +168,7 @@ exports[`SidePanelMobile snapshots tests should match snapshot 1`] = `
               >
                 <button
                   aria-label="назад"
-                  class="component component component component text text text size-32 hug size-32 component component mobileComponent component"
+                  class="component component component component component text text text size-32 hug size-32 component component mobileComponent component"
                   type="button"
                 >
                   <span
@@ -215,7 +215,7 @@ exports[`SidePanelMobile snapshots tests should match snapshot 1`] = `
                 >
                   <button
                     aria-label="закрыть"
-                    class="component component component component text text text size-48 hug size-48 cc-icon-button button button mobile primary component border-32 component"
+                    class="component component component component component text text text size-48 hug size-48 cc-icon-button button button mobile primary component border-32 component"
                     type="button"
                   >
                     <span

From 124b9b78b069a4c064a79cbf7730021117244e16 Mon Sep 17 00:00:00 2001
From: hextion <100ishundred@gmail.com>
Date: Tue, 7 Oct 2025 10:11:33 +0300
Subject: [PATCH 04/11] fix(button): specificity

---
 .../components/base-button/default.module.css | 24 +++++------
 .../base-button/inverted.module.css           | 42 ++++++++++---------
 .../src/desktop/default.desktop.module.css    | 28 +++++++------
 .../src/desktop/inverted.desktop.module.css   | 31 ++++++++------
 .../src/mobile/default.mobile.module.css      | 24 +++++++----
 .../src/mobile/inverted.mobile.module.css     | 22 ++++++----
 6 files changed, 96 insertions(+), 75 deletions(-)

diff --git a/packages/button/src/components/base-button/default.module.css b/packages/button/src/components/base-button/default.module.css
index 60660e316a..27e7f65c07 100644
--- a/packages/button/src/components/base-button/default.module.css
+++ b/packages/button/src/components/base-button/default.module.css
@@ -10,10 +10,10 @@
             @mixin hover {
                 background-color: var(--button-accent-hover-bg-color);
             }
-        }
 
-        &:active {
-            background-color: var(--button-accent-active-bg-color);
+            &:active {
+                background-color: var(--button-accent-active-bg-color);
+            }
         }
 
         & .loader {
@@ -52,10 +52,10 @@
                 background-color: var(--button-outlined-hover-bg-color);
                 border-color: var(--button-outlined-hover-border-color);
             }
-        }
 
-        &:active {
-            background-color: var(--button-outlined-active-bg-color);
+            &:active {
+                background-color: var(--button-outlined-active-bg-color);
+            }
         }
 
         & .loader {
@@ -77,10 +77,10 @@
                 background-color: var(--button-tertiary-hover-bg-color);
                 border-color: var(--button-tertiary-hover-border-color);
             }
-        }
 
-        &:active {
-            background-color: var(--button-tertiary-active-bg-color);
+            &:active {
+                background-color: var(--button-tertiary-active-bg-color);
+            }
         }
 
         & .loader {
@@ -101,10 +101,10 @@
             @mixin 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 {
diff --git a/packages/button/src/components/base-button/inverted.module.css b/packages/button/src/components/base-button/inverted.module.css
index 8472f256a0..2ef4d7ac8a 100644
--- a/packages/button/src/components/base-button/inverted.module.css
+++ b/packages/button/src/components/base-button/inverted.module.css
@@ -6,12 +6,14 @@
         background-color: var(--button-inverted-accent-base-bg-color);
         border: var(--button-border-width) solid transparent;
 
-        @mixin hover {
-            background-color: var(--button-inverted-accent-hover-bg-color);
-        }
+        @mixin not-disabled {
+            @mixin hover {
+                background-color: var(--button-inverted-accent-hover-bg-color);
+            }
 
-        &:active {
-            background-color: var(--button-inverted-accent-active-bg-color);
+            &:active {
+                background-color: var(--button-inverted-accent-active-bg-color);
+            }
         }
 
         & .loader {
@@ -45,15 +47,15 @@
         background-color: var(--button-inverted-outlined-base-bg-color);
         border: var(--button-border-width) solid var(--button-inverted-outlined-base-border-color);
 
-        @media (hover: hover) {
-            &:hover {
+        @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);
+            &:active {
+                background-color: var(--button-inverted-outlined-active-bg-color);
+            }
         }
 
         & .loader {
@@ -70,15 +72,15 @@
         background-color: var(--button-inverted-tertiary-base-bg-color);
         border: var(--button-border-width) solid var(--button-inverted-tertiary-base-border-color);
 
-        @media (hover: hover) {
-            &:hover {
+        @mixin not-disabled {
+            @mixin hover {
                 background-color: var(--button-inverted-tertiary-hover-bg-color);
                 border-color: var(--button-inverted-tertiary-hover-border-color);
             }
-        }
 
-        &:active {
-            background-color: var(--button-inverted-tertiary-active-bg-color);
+            &:active {
+                background-color: var(--button-inverted-tertiary-active-bg-color);
+            }
         }
 
         & .loader {
@@ -95,14 +97,14 @@
         background-color: transparent;
         border: var(--button-border-width) solid transparent;
 
-        @media (hover: hover) {
-            &:hover {
+        @mixin not-disabled {
+            @mixin hover {
                 background-color: var(--button-inverted-transparent-hover-bg-color);
             }
-        }
 
-        &:active {
-            background-color: var(--button-inverted-transparent-active-bg-color);
+            &:active {
+                background-color: var(--button-inverted-transparent-active-bg-color);
+            }
         }
 
         & .loader {
diff --git a/packages/button/src/desktop/default.desktop.module.css b/packages/button/src/desktop/default.desktop.module.css
index fbdad46196..ad7158c19a 100644
--- a/packages/button/src/desktop/default.desktop.module.css
+++ b/packages/button/src/desktop/default.desktop.module.css
@@ -5,14 +5,14 @@
         color: var(--button-primary-color);
         background-color: var(--button-primary-base-bg-color);
 
-        @media (hover: hover) {
-            &:hover {
+        @mixin not-disabled {
+            @mixin 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);
+            }
         }
 
         & .loader {
@@ -23,18 +23,22 @@
     &.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);
+        @mixin not-disabled {
+            &:active {
+                color: var(--button-text-active-color);
+            }
         }
     }
 
diff --git a/packages/button/src/desktop/inverted.desktop.module.css b/packages/button/src/desktop/inverted.desktop.module.css
index e5ebd16e35..3505fe8ebb 100644
--- a/packages/button/src/desktop/inverted.desktop.module.css
+++ b/packages/button/src/desktop/inverted.desktop.module.css
@@ -5,14 +5,15 @@
         color: var(--button-inverted-primary-color);
         background-color: var(--button-inverted-primary-base-bg-color);
 
-        @mixin 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);
         }
@@ -21,18 +22,22 @@
     &.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);
+        @mixin not-disabled {
+            &:active {
+                color: var(--button-inverted-text-active-color);
+            }
         }
     }
 
diff --git a/packages/button/src/mobile/default.mobile.module.css b/packages/button/src/mobile/default.mobile.module.css
index 0360cd80ef..64cd843cbd 100644
--- a/packages/button/src/mobile/default.mobile.module.css
+++ b/packages/button/src/mobile/default.mobile.module.css
@@ -5,12 +5,14 @@
         color: var(--button-primary-mobile-color);
         background-color: var(--button-primary-mobile-base-bg-color);
 
-        @mixin hover {
-            background-color: var(--button-primary-mobile-hover-bg-color);
-        }
+        @mixin not-disabled {
+            @mixin 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 {
@@ -21,14 +23,18 @@
     &.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);
+        @mixin not-disabled {
+            &:active {
+                color: var(--button-text-mobile-active-color);
+            }
         }
     }
 
diff --git a/packages/button/src/mobile/inverted.mobile.module.css b/packages/button/src/mobile/inverted.mobile.module.css
index 8386016fe5..6576da467a 100644
--- a/packages/button/src/mobile/inverted.mobile.module.css
+++ b/packages/button/src/mobile/inverted.mobile.module.css
@@ -5,14 +5,14 @@
         color: var(--button-inverted-primary-mobile-color);
         background-color: var(--button-inverted-primary-mobile-base-bg-color);
 
-        @media (hover: hover) {
-            &:hover {
+        @mixin not-disabled {
+            @mixin 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 {
@@ -23,14 +23,18 @@
     &.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);
+        @mixin not-disabled {
+            &:active {
+                color: var(--button-inverted-text-mobile-active-color);
+            }
         }
     }
 

From 9154414b980c0b1ddec5820cb87351f0545737ba Mon Sep 17 00:00:00 2001
From: hextion <100ishundred@gmail.com>
Date: Tue, 7 Oct 2025 10:12:06 +0300
Subject: [PATCH 05/11] fix(button): text view height

---
 packages/button/src/components/base-button/index.module.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/button/src/components/base-button/index.module.css b/packages/button/src/components/base-button/index.module.css
index deb2afc13c..1cea4779ee 100644
--- a/packages/button/src/components/base-button/index.module.css
+++ b/packages/button/src/components/base-button/index.module.css
@@ -66,6 +66,10 @@
         }
     }
 
+    &.text {
+        min-height: 24px;
+    }
+
     /* Size */
 
     /* За счет того, что у кнопок есть border 1px,

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

---
 .../base-button-candidate/Component.tsx       |  10 ++
 .../base-button-candidate/index.module.css    |  12 ++
 .../src/components/base-button/Component.tsx  |  64 ++++---
 .../components/base-button/index.module.css   |  10 --
 .../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 ++++++--------
 packages/icon-button/src/Component.tsx        |  73 ++++----
 ...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 ++++++-------
 packages/icon-button/src/default.module.css   | 164 ++++++++++--------
 packages/icon-button/src/inverted.module.css  | 164 ++++++++++--------
 .../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 +++----
 23 files changed, 770 insertions(+), 833 deletions(-)

diff --git a/packages/button/src/components/base-button-candidate/Component.tsx b/packages/button/src/components/base-button-candidate/Component.tsx
index 1a960d5477..4fb0719da8 100644
--- a/packages/button/src/components/base-button-candidate/Component.tsx
+++ b/packages/button/src/components/base-button-candidate/Component.tsx
@@ -37,6 +37,11 @@ interface ComponentProps {
      */
     loaderClassName?: string;
 
+    /**
+     * Дополнительный класc при отключении кнопки
+     */
+    disabledClassName?: string;
+
     /**
      * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
      */
@@ -78,18 +83,21 @@ export const BaseButtonCandidate = forwardRef<HTMLElement, BaseButtonCandidatePr
             block = false,
             className,
             loaderClassName,
+            disabledClassName,
             dataTestId,
             loading = false,
             Component = ButtonComponent,
             disabled = false,
             type = 'button',
             onClick,
+            href,
             ...restProps
         },
         ref,
     ) => {
         const buttonRef = useRef<HTMLElement>(null);
         const [focused] = useFocus(buttonRef, 'keyboard');
+        const passDisabledClassName = disabled && Boolean(href);
 
         const handleClick: MouseEventHandler<HTMLElement> = (event) => {
             if (disabled || loading) {
@@ -104,6 +112,7 @@ export const BaseButtonCandidate = forwardRef<HTMLElement, BaseButtonCandidatePr
             <Component
                 data-test-id={dataTestId}
                 {...restProps}
+                href={href}
                 className={cn(
                     styles.component,
                     {
@@ -111,6 +120,7 @@ export const BaseButtonCandidate = forwardRef<HTMLElement, BaseButtonCandidatePr
                         [styles.block]: block,
                         [styles.loading]: loading,
                     },
+                    passDisabledClassName && [styles.disabled, disabledClassName],
                     className,
                 )}
                 type={type}
diff --git a/packages/button/src/components/base-button-candidate/index.module.css b/packages/button/src/components/base-button-candidate/index.module.css
index 4682406581..3fa5725f2a 100644
--- a/packages/button/src/components/base-button-candidate/index.module.css
+++ b/packages/button/src/components/base-button-candidate/index.module.css
@@ -36,4 +36,16 @@
     &.loading > *:not(.loader) {
         opacity: 0;
     }
+
+    /* Disabled */
+
+    /* Disabled */
+
+    @mixin disabled {
+        cursor: var(--disabled-cursor);
+
+        & * {
+            pointer-events: none;
+        }
+    }
 }
diff --git a/packages/button/src/components/base-button/Component.tsx b/packages/button/src/components/base-button/Component.tsx
index 6a61f705d2..588bc9b80e 100644
--- a/packages/button/src/components/base-button/Component.tsx
+++ b/packages/button/src/components/base-button/Component.tsx
@@ -27,7 +27,7 @@ export const BaseButton = forwardRef<ButtonRef, CommonButtonProps & PrivateButto
             leftAddons,
             rightAddons,
             size = 56,
-            className,
+            className: classNameFromProps,
             spinnerClassName,
             href,
             loading = false,
@@ -50,34 +50,29 @@ export const BaseButton = forwardRef<ButtonRef, CommonButtonProps & PrivateButto
 
         const sizeStyle = `size-${size}`;
 
-        const passDisabledClass = disabled && Boolean(href);
-
-        const componentProps = {
-            className: cn(
-                commonStyles.component,
-                colorStyles[colors].component,
-                styles.component,
-                colorStylesMap[colors].component,
-                commonStyles[view],
-                colorStyles[colors][view],
-                colorStylesMap[colors][view],
-                commonStyles[sizeStyle],
-                commonStyles[textResizing],
-                shape === 'rectangular' && styles[sizeStyle],
-                shape === 'rounded' && commonStyles[shape],
-                {
-                    [commonStyles.allowBackdropBlur]: allowBackdropBlur,
-                    [commonStyles.iconOnly]: iconOnly,
-                    [commonStyles.loading]: showLoader,
-                    [commonStyles.withRightAddons]: Boolean(rightAddons) && !iconOnly,
-                    [commonStyles.withLeftAddons]: Boolean(leftAddons) && !iconOnly,
-                    [colorStyles[colors].loading]: showLoader,
-                    [colorStylesMap[colors].loading]: showLoader,
-                },
-                passDisabledClass && [commonStyles.disabled, colorStyles[colors].disabled],
-                className,
-            ),
-        };
+        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],
+            shape === 'rectangular' && styles[sizeStyle],
+            shape === 'rounded' && commonStyles[shape],
+            {
+                [commonStyles.allowBackdropBlur]: allowBackdropBlur,
+                [commonStyles.iconOnly]: iconOnly,
+                [commonStyles.loading]: showLoader,
+                [commonStyles.withRightAddons]: Boolean(rightAddons) && !iconOnly,
+                [commonStyles.withLeftAddons]: Boolean(leftAddons) && !iconOnly,
+                [colorStyles[colors].loading]: showLoader,
+                [colorStylesMap[colors].loading]: showLoader,
+            },
+            classNameFromProps,
+        );
 
         const loaderClassName = cn(
             colorStyles[colors].loader,
@@ -87,15 +82,16 @@ export const BaseButton = forwardRef<ButtonRef, CommonButtonProps & PrivateButto
 
         return (
             <BaseButtonCandidate
-                {...componentProps}
                 {...restProps}
-                Component={Component}
-                loaderClassName={loaderClassName}
-                loading={showLoader}
+                ref={ref}
                 href={href}
                 type={type}
+                className={className}
+                Component={Component}
+                loading={showLoader}
+                loaderClassName={loaderClassName}
                 disabled={disabled}
-                ref={ref}
+                disabledClassName={cn(commonStyles.disabled, colorStyles[colors].disabled)}
             >
                 {leftAddons && <span className={commonStyles.addons}>{leftAddons}</span>}
                 {children && (
diff --git a/packages/button/src/components/base-button/index.module.css b/packages/button/src/components/base-button/index.module.css
index 1cea4779ee..6d3f7e12c2 100644
--- a/packages/button/src/components/base-button/index.module.css
+++ b/packages/button/src/components/base-button/index.module.css
@@ -247,14 +247,4 @@
     &.size-72 {
         @mixin addon-label-gap var(--gap-12);
     }
-
-    /* Disabled */
-
-    @mixin disabled {
-        cursor: var(--disabled-cursor);
-
-        & * {
-            pointer-events: none;
-        }
-    }
 }
diff --git a/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap b/packages/calendar-range/src/__snapshots__/Component.test.tsx.snap
index 2a6ffad59b..e2ac4e8d22 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 size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
+                class="component cc-icon-button arrow primary component border-32 component"
                 data-test-id="period-slider-btn-previous-day"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  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 size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
+                class="component cc-icon-button arrow primary component border-32 component"
                 data-test-id="period-slider-btn-next-day"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  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 size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
+                class="component cc-icon-button arrow primary component border-32 component"
                 data-test-id="period-slider-btn-previous-day"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  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 size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
+                class="component cc-icon-button arrow primary component border-32 component"
                 data-test-id="period-slider-btn-next-day"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  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 643b440045..f966dbdabc 100644
--- a/packages/calendar/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/calendar/src/__snapshots__/Component.test.tsx.snap
@@ -3399,30 +3399,26 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
       >
         <button
           aria-label="Предыдущий период"
-          class="component component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
+          class="component cc-icon-button arrow primary component border-32 component"
           data-test-id="period-slider-btn-previous-day"
           type="button"
         >
           <span
-            class="label stretchText"
+            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
@@ -3432,30 +3428,26 @@ exports[`Calendar Display tests should match selectorView="month-only" snapshot
         </span>
         <button
           aria-label="Следующий период"
-          class="component component component component component text text text size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
+          class="component cc-icon-button arrow primary component border-32 component"
           data-test-id="period-slider-btn-next-day"
           type="button"
         >
           <span
-            class="label stretchText"
+            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 ab4f7598c0..5390923593 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 size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
+      class="component cc-icon-button arrow primary component border-32 component"
       data-test-id="period-slider-btn-previous-day"
       disabled=""
       type="button"
     >
       <span
-        class="label stretchText"
+        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 size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
+      class="component cc-icon-button arrow primary component border-32 component"
       data-test-id="period-slider-btn-next-day"
       disabled=""
       type="button"
     >
       <span
-        class="label stretchText"
+        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 size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
+      class="component cc-icon-button arrow primary component border-32 component"
       data-test-id="period-slider-btn-previous-day"
       disabled=""
       type="button"
     >
       <span
-        class="label stretchText"
+        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 size-48 hug size-48 cc-icon-button arrow primary component border-32 component"
+      class="component cc-icon-button arrow primary component border-32 component"
       data-test-id="period-slider-btn-next-day"
       disabled=""
       type="button"
     >
       <span
-        class="label stretchText"
+        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 c85ee19d94..9f3372b2af 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 size-48 hug size-48 cc-icon-button download primary component border-24 component"
+          class="component cc-icon-button download primary component border-24 component"
           download="новое_название_файла"
           href="/link"
         >
           <span
-            class="label stretchText"
+            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 size-48 hug size-48 cc-icon-button delete primary component border-24 component"
+          class="component cc-icon-button delete primary component border-24 component"
           type="button"
         >
           <span
-            class="label stretchText"
+            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 size-48 hug size-48 cc-icon-button download primary component border-24 component"
+        class="component cc-icon-button download primary component border-24 component"
         download="новое_название_файла"
         href="/link"
       >
         <span
-          class="label stretchText"
+          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 size-48 hug size-48 cc-icon-button delete primary component border-24 component"
+        class="component cc-icon-button delete primary component border-24 component"
         type="button"
       >
         <span
-          class="label stretchText"
+          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/Component.tsx b/packages/icon-button/src/Component.tsx
index 72431fe947..6c9c187c43 100644
--- a/packages/icon-button/src/Component.tsx
+++ b/packages/icon-button/src/Component.tsx
@@ -7,7 +7,9 @@ import React, {
 } from 'react';
 import cn from 'classnames';
 
-import { Button, type ButtonProps } from '@alfalab/core-components-button';
+import { type ButtonProps } from '@alfalab/core-components-button';
+import { BaseButtonCandidate } from '@alfalab/core-components-button/components/base-button-candidate';
+import { useLoading } from '@alfalab/core-components-button/shared';
 
 import defaultColors from './default.module.css';
 import styles from './index.module.css';
@@ -27,7 +29,7 @@ export type IconButtonProps = {
     /**
      * Тип кнопки
      */
-    view?: 'primary' | 'secondary' | 'transparent' | 'tertiary' | 'negative';
+    view?: 'primary' | 'secondary' | 'transparent' /* @deprecated */ | 'tertiary' | 'negative';
 
     /**
      * Размер компонента
@@ -75,41 +77,46 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
             colors = 'default',
             alignIcon = 'center',
             transparentBg = false,
+            loading: loadingFromProps,
             ...restProps
         },
         ref,
-    ) => (
-        <Button
-            {...restProps}
-            ref={ref}
-            view='text'
-            className={cn(
-                'cc-icon-button',
-                className,
-                colorStyles[colors][view],
-                colorStyles[colors].component,
-                styles[`border-${size}`],
-                {
-                    [colorStyles[colors].loader]: restProps.loading,
-                    [colorStyles[colors].transparentBg]: transparentBg,
-                },
-            )}
-            size={48}
-        >
-            <span className={cn(styles.iconWrapper, styles[`size-${size}`], styles[alignIcon])}>
-                {React.isValidElement(Icon) ? (
-                    React.cloneElement(Icon as ReactElement<{ className?: string }>, {
-                        className: cn(
-                            styles.icon,
-                            (Icon as ReactElement<{ className?: string }>).props.className,
-                        ),
-                    })
-                ) : (
-                    <Icon className={styles.icon} />
+    ) => {
+        const loading = useLoading(loadingFromProps);
+
+        return (
+            <BaseButtonCandidate
+                {...restProps}
+                ref={ref}
+                disabledClassName={colorStyles[colors].disabled}
+                loading={loading}
+                className={cn(
+                    'cc-icon-button',
+                    className,
+                    colorStyles[colors][view],
+                    colorStyles[colors].component,
+                    styles[`border-${size}`],
+                    {
+                        [colorStyles[colors].loader]: loading,
+                        [colorStyles[colors].transparentBg]: transparentBg,
+                    },
                 )}
-            </span>
-        </Button>
-    ),
+            >
+                <span className={cn(styles.iconWrapper, styles[`size-${size}`], styles[alignIcon])}>
+                    {React.isValidElement(Icon) ? (
+                        React.cloneElement(Icon as ReactElement<{ className?: string }>, {
+                            className: cn(
+                                styles.icon,
+                                (Icon as ReactElement<{ className?: string }>).props.className,
+                            ),
+                        })
+                    ) : (
+                        <Icon className={styles.icon} />
+                    )}
+                </span>
+            </BaseButtonCandidate>
+        );
+    },
 );
 
 IconButton.displayName = 'IconButton';
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 67a9aa50b6..818600cae3 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 size-48 hug size-48 cc-icon-button primary component border-48 component"
+        class="component cc-icon-button primary component border-48 component"
         data-test-id="test-id"
         href="http://example.com"
-      >
-        <span
-          class="label stretchText"
-        >
-          <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 size-48 hug size-48 cc-icon-button primary component border-48 component"
-      data-test-id="test-id"
-      href="http://example.com"
-    >
-      <span
-        class="label stretchText"
       >
         <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 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 size-48 hug size-48 cc-icon-button primary component border-48 component"
+        class="component cc-icon-button primary component border-48 component"
         type="button"
-      >
-        <span
-          class="label stretchText"
-        >
-          <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 size-48 hug size-48 cc-icon-button primary component border-48 component"
-      type="button"
-    >
-      <span
-        class="label stretchText"
       >
         <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 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/default.module.css b/packages/icon-button/src/default.module.css
index 231494d1f5..3620310b2c 100644
--- a/packages/icon-button/src/default.module.css
+++ b/packages/icon-button/src/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/inverted.module.css b/packages/icon-button/src/inverted.module.css
index 0b6f20d65e..81727ecd37 100644
--- a/packages/icon-button/src/inverted.module.css
+++ b/packages/icon-button/src/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/input-autocomplete/src/__snapshots__/Component.test.tsx.snap b/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap
index 7e715aa09c..8ef4d2ac89 100644
--- a/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/input-autocomplete/src/__snapshots__/Component.test.tsx.snap
@@ -140,29 +140,25 @@ exports[`InputAutocompleteMobile Snapshots tests should match snapshot in open s
                           >
                             <button
                               aria-label="закрыть"
-                              class="component component component component component text text text size-48 hug size-48 cc-icon-button button button mobile primary component border-32 component"
+                              class="component cc-icon-button button button mobile primary component border-32 component"
                               type="button"
                             >
                               <span
-                                class="label stretchText"
+                                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 2b70769763..5e2e7df053 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 size-48 hug size-48 cc-icon-button button button primary component border-48 component"
+                  class="component cc-icon-button button button primary component border-48 component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    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>
@@ -208,29 +204,25 @@ exports[`ModalMobile snapshots tests should match snapshot 1`] = `
               >
                 <button
                   aria-label="закрыть"
-                  class="component component component component component text text text size-48 hug size-48 cc-icon-button button button mobile primary component border-32 component"
+                  class="component cc-icon-button button button mobile primary component border-32 component"
                   type="button"
                 >
                   <span
-                    class="label stretchText"
+                    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 dfd75c6a81..eb025b12ee 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 size-48 hug size-48 cc-icon-button button button primary component border-48 component"
+                class="component cc-icon-button button button primary component border-48 component"
                 data-test-id="navigation-bar-dti-closer"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  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 8c5034c880..917b30f52a 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 size-48 hug size-48 cc-icon-button closeButton closeButton primary component border-48 component"
+                class="component cc-icon-button closeButton closeButton primary component border-48 component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  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 size-48 hug size-48 cc-icon-button closeButton closeButton primary component border-48 component"
+                class="component cc-icon-button closeButton closeButton primary component border-48 component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  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 size-48 hug size-48 cc-icon-button closeButton closeButton primary component border-48 component"
+                class="component cc-icon-button closeButton closeButton primary component border-48 component"
                 type="button"
               >
                 <span
-                  class="label stretchText"
+                  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 8871e57133..951c5c7b01 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 size-48 hug size-48 cc-icon-button closeButton closeButton primary component border-48 component"
+              class="component cc-icon-button closeButton closeButton primary component border-48 component"
               type="button"
             >
               <span
-                class="label stretchText"
+                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 fffd06da45..0049b7edbb 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 size-48 hug size-48 cc-icon-button eye secondary component border-24 component"
+            class="component cc-icon-button eye secondary component border-24 component"
             title="Показать"
             type="button"
           >
             <span
-              class="label stretchText"
+              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 a5273f6f28..72a47569f5 100644
--- a/packages/picker-button/src/__snapshots__/Component.test.tsx.snap
+++ b/packages/picker-button/src/__snapshots__/Component.test.tsx.snap
@@ -359,29 +359,25 @@ exports[`Snapshots tests should display opened correctly 4`] = `
                         >
                           <button
                             aria-label="закрыть"
-                            class="component component component component component text text text size-48 hug size-48 cc-icon-button button button mobile primary component border-32 component"
+                            class="component cc-icon-button button button mobile primary component border-32 component"
                             type="button"
                           >
                             <span
-                              class="label stretchText"
+                              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>
@@ -1473,29 +1469,25 @@ exports[`Snapshots tests should display opened correctly 6`] = `
                         >
                           <button
                             aria-label="закрыть"
-                            class="component component component component component text text text size-48 hug size-48 cc-icon-button button button mobile primary component border-32 component"
+                            class="component cc-icon-button button button mobile primary component border-32 component"
                             type="button"
                           >
                             <span
-                              class="label stretchText"
+                              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 5ba617100d..49dd709cbf 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 size-48 hug size-48 cc-icon-button button button primary component border-48 component"
+                    class="component cc-icon-button button button primary component border-48 component"
                     type="button"
                   >
                     <span
-                      class="label stretchText"
+                      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>
@@ -215,29 +211,25 @@ exports[`SidePanelMobile snapshots tests should match snapshot 1`] = `
                 >
                   <button
                     aria-label="закрыть"
-                    class="component component component component component text text text size-48 hug size-48 cc-icon-button button button mobile primary component border-32 component"
+                    class="component cc-icon-button button button mobile primary component border-32 component"
                     type="button"
                   >
                     <span
-                      class="label stretchText"
+                      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 4b42d323433eea319b76f9868d5d1545978c2325 Mon Sep 17 00:00:00 2001
From: hextion <100ishundred@gmail.com>
Date: Tue, 7 Oct 2025 15:45:02 +0300
Subject: [PATCH 07/11] refactor(pass-code-v1): used BaseButtonCandidate

---
 .../base-button-candidate/Component.tsx       |   2 +-
 .../base-button-candidate/index.module.css    |   7 +-
 .../components/base-button/index.module.css   |   4 -
 .../src/__snapshots__/component.test.tsx.snap | 576 ++++++------------
 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 +--
 8 files changed, 226 insertions(+), 482 deletions(-)

diff --git a/packages/button/src/components/base-button-candidate/Component.tsx b/packages/button/src/components/base-button-candidate/Component.tsx
index 4fb0719da8..8bddaf9137 100644
--- a/packages/button/src/components/base-button-candidate/Component.tsx
+++ b/packages/button/src/components/base-button-candidate/Component.tsx
@@ -57,7 +57,7 @@ interface ComponentProps {
 
     /**
      * Идентификатор для систем автоматизированного тестирования.
-     * Для спиннера используется модификатор -loader
+     * Для лоадер используется модификатор -loader
      */
     dataTestId?: string;
 
diff --git a/packages/button/src/components/base-button-candidate/index.module.css b/packages/button/src/components/base-button-candidate/index.module.css
index 3fa5725f2a..c730baa539 100644
--- a/packages/button/src/components/base-button-candidate/index.module.css
+++ b/packages/button/src/components/base-button-candidate/index.module.css
@@ -11,6 +11,11 @@
     align-items: center;
     position: relative;
 
+    transition:
+        background 0.2s ease,
+        border 0.2s ease,
+        color 0.2s ease;
+
     /* Block */
 
     &.block {
@@ -39,8 +44,6 @@
 
     /* Disabled */
 
-    /* Disabled */
-
     @mixin disabled {
         cursor: var(--disabled-cursor);
 
diff --git a/packages/button/src/components/base-button/index.module.css b/packages/button/src/components/base-button/index.module.css
index 6d3f7e12c2..9f479d40a4 100644
--- a/packages/button/src/components/base-button/index.module.css
+++ b/packages/button/src/components/base-button/index.module.css
@@ -18,10 +18,6 @@
         font-weight: var(--button-font-weight);
         font-family: var(--font-family);
     }
-    transition:
-        background 0.2s ease,
-        border 0.2s ease,
-        color 0.2s ease;
 
     &.rounded {
         border-radius: var(--border-radius-pill);
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 26587e895c..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,143 +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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 iconOnly button secondary digit component"
-          type="button"
-        >
-          0
-        </button>
-      </div>
+        0
+      </button>
       <div />
     </div>
   </div>
@@ -202,173 +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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 iconOnly button secondary digit component"
-          type="button"
-        >
-          0
-        </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 size-56 hug size-56 button text component"
-          type="button"
+        <svg
+          fill="currentColor"
+          focusable="false"
+          height="48"
+          role="img"
+          viewBox="0 0 48 48"
+          width="48"
         >
-          <span
-            class="label stretchText"
-          >
-            <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>
@@ -396,143 +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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 button secondary digit component"
-          type="button"
-        >
-          <span
-            class="label stretchText"
-          >
-            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 size-56 hug size-56 iconOnly button secondary digit component"
-          type="button"
-        >
-          0
-        </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 47f40ed52ccad06cac1536f5ab1581c287a3f201 Mon Sep 17 00:00:00 2001
From: hextion <100ishundred@gmail.com>
Date: Tue, 7 Oct 2025 20:06:50 +0300
Subject: [PATCH 08/11] refactor(pass-code): used BaseButtonCandidate

---
 .../src/__snapshots__/component.test.tsx.snap | 148 +++++-------------
 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, 80 insertions(+), 191 deletions(-)

diff --git a/packages/pass-code/src/__snapshots__/component.test.tsx.snap b/packages/pass-code/src/__snapshots__/component.test.tsx.snap
index 4f34115502..800ae4abd7 100644
--- a/packages/pass-code/src/__snapshots__/component.test.tsx.snap
+++ b/packages/pass-code/src/__snapshots__/component.test.tsx.snap
@@ -53,98 +53,62 @@ exports[`PassCode Snapshot tests should match snapshot with code length 1`] = `
       class="component"
     >
       <button
-        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          1
-        </span>
+        1
       </button>
       <button
-        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          2
-        </span>
+        2
       </button>
       <button
-        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          3
-        </span>
+        3
       </button>
       <button
-        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          4
-        </span>
+        4
       </button>
       <button
-        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          5
-        </span>
+        5
       </button>
       <button
-        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          6
-        </span>
+        6
       </button>
       <button
-        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          7
-        </span>
+        7
       </button>
       <button
-        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          8
-        </span>
+        8
       </button>
       <button
-        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          9
-        </span>
+        9
       </button>
       <div />
       <button
-        class="component component component component component secondary secondary secondary size-56 hug size-56 iconOnly button secondary digit component"
+        class="component component digit component"
         type="button"
       >
         0
@@ -179,98 +143,62 @@ exports[`PassCode Snapshot tests should match snapshot with unknown code length
       class="component"
     >
       <button
-        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          1
-        </span>
+        1
       </button>
       <button
-        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          2
-        </span>
+        2
       </button>
       <button
-        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          3
-        </span>
+        3
       </button>
       <button
-        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          4
-        </span>
+        4
       </button>
       <button
-        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          5
-        </span>
+        5
       </button>
       <button
-        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          6
-        </span>
+        6
       </button>
       <button
-        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          7
-        </span>
+        7
       </button>
       <button
-        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          8
-        </span>
+        8
       </button>
       <button
-        class="component component component component component secondary secondary secondary size-56 hug size-56 button secondary digit component"
+        class="component component digit component"
         type="button"
       >
-        <span
-          class="label stretchText"
-        >
-          9
-        </span>
+        9
       </button>
       <div />
       <button
-        class="component component component component component secondary secondary secondary size-56 hug size-56 iconOnly button secondary digit component"
+        class="component component digit component"
         type="button"
       >
         0
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 0d1c67cb44..72a6f1e6cb 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>
@@ -94,11 +93,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 4b1e2899501a367991845ab25c59332475fdb3c5 Mon Sep 17 00:00:00 2001
From: hextion <100ishundred@gmail.com>
Date: Wed, 8 Oct 2025 10:25:24 +0300
Subject: [PATCH 09/11] refactor(button): css specificity

---
 .../src/components/base-button/Component.tsx  |   6 +-
 .../components/base-button/index.module.css   | 200 +++++-------------
 2 files changed, 62 insertions(+), 144 deletions(-)

diff --git a/packages/button/src/components/base-button/Component.tsx b/packages/button/src/components/base-button/Component.tsx
index 588bc9b80e..0fc6cbfcde 100644
--- a/packages/button/src/components/base-button/Component.tsx
+++ b/packages/button/src/components/base-button/Component.tsx
@@ -66,8 +66,10 @@ export const BaseButton = forwardRef<ButtonRef, CommonButtonProps & PrivateButto
                 [commonStyles.allowBackdropBlur]: allowBackdropBlur,
                 [commonStyles.iconOnly]: iconOnly,
                 [commonStyles.loading]: showLoader,
-                [commonStyles.withRightAddons]: Boolean(rightAddons) && !iconOnly,
-                [commonStyles.withLeftAddons]: Boolean(leftAddons) && !iconOnly,
+                [commonStyles.withRightAddons]:
+                    Boolean(rightAddons) && !iconOnly && !(view === 'text'),
+                [commonStyles.withLeftAddons]:
+                    Boolean(leftAddons) && !iconOnly && !(view === 'text'),
                 [colorStyles[colors].loading]: showLoader,
                 [colorStylesMap[colors].loading]: showLoader,
             },
diff --git a/packages/button/src/components/base-button/index.module.css b/packages/button/src/components/base-button/index.module.css
index 9f479d40a4..ed2f36e08c 100644
--- a/packages/button/src/components/base-button/index.module.css
+++ b/packages/button/src/components/base-button/index.module.css
@@ -13,6 +13,34 @@
     }
 }
 
+@define-mixin adjust-size $height {
+    min-height: $height;
+
+    &.iconOnly.iconOnly {
+        min-width: $height;
+        padding: var(--gap-0);
+    }
+
+    &.transparent,
+    &.text {
+        min-width: auto;
+    }
+
+    &.text {
+        padding: var(--gap-0);
+        min-height: 24px;
+    }
+}
+
+@define-mixin with-addons-padding $padding {
+    &.withLeftAddons {
+        padding-left: $padding;
+    }
+    &.withRightAddons {
+        padding-right: $padding;
+    }
+}
+
 .component {
     &&& {
         font-weight: var(--button-font-weight);
@@ -71,157 +99,57 @@
     /* За счет того, что у кнопок есть border 1px,
 для полного соответствия макетам padding необходимо уменьшить на 1px (16px -> 15px) */
     &.size-32 {
-        &:not(.iconOnly):not(.text):not(.transparent) {
-            min-width: 80px;
-        }
-        &:not(.text) {
-            min-height: var(--size-xxs-height);
-
-            &:not(.iconOnly) {
-                padding: var(--gap-0) 15px;
-            }
-            &.withLeftAddons {
-                padding-left: 11px;
-            }
-            &.withRightAddons {
-                padding-right: 11px;
-            }
-        }
-
+        min-width: 80px;
+        padding: var(--gap-0) 15px;
         @mixin action_primary_small;
-
-        &:not(.text).iconOnly {
-            min-width: var(--size-xxs-height);
-        }
+        @mixin with-addons-padding 11px;
+        @mixin adjust-size var(--size-xxs-height);
+        @mixin addon-label-gap 6px;
     }
 
     &.size-40 {
-        &:not(.iconOnly):not(.text):not(.transparent) {
-            min-width: 88px;
-        }
-        &:not(.text) {
-            min-height: var(--size-xs-height);
-
-            &:not(.iconOnly) {
-                padding: var(--gap-0) 19px;
-            }
-            &.withLeftAddons {
-                padding-left: 15px;
-            }
-            &.withRightAddons {
-                padding-right: 15px;
-            }
-        }
-
+        min-width: 88px;
+        padding: var(--gap-0) 19px;
         @mixin action_primary_small;
-
-        &:not(.text).iconOnly {
-            min-width: var(--size-xs-height);
-        }
+        @mixin with-addons-padding 15px;
+        @mixin adjust-size var(--size-xs-height);
+        @mixin addon-label-gap 6px;
     }
 
     &.size-48 {
-        &:not(.iconOnly):not(.text):not(.transparent) {
-            min-width: 104px;
-        }
-        &:not(.text) {
-            min-height: var(--size-s-height);
-
-            &:not(.iconOnly) {
-                padding: var(--gap-0) 23px;
-            }
-            &.withLeftAddons {
-                padding-left: 19px;
-            }
-            &.withRightAddons {
-                padding-right: 19px;
-            }
-        }
-
+        min-width: 104px;
+        padding: var(--gap-0) 23px;
         @mixin action_component_primary;
-
-        line-height: 20px;
-
-        &:not(.text).iconOnly {
-            min-width: var(--size-s-height);
-        }
+        @mixin with-addons-padding 19px;
+        @mixin adjust-size var(--size-s-height);
+        @mixin addon-label-gap var(--gap-8);
     }
 
     &.size-56 {
-        &:not(.iconOnly):not(.text):not(.transparent) {
-            min-width: 128px;
-        }
-        &:not(.text) {
-            min-height: var(--size-m-height);
-
-            &:not(.iconOnly) {
-                padding: var(--gap-0) 27px;
-            }
-            &.withLeftAddons {
-                padding-left: 23px;
-            }
-            &.withRightAddons {
-                padding-right: 23px;
-            }
-        }
-
+        min-width: 128px;
+        padding: var(--gap-0) 27px;
         @mixin action_component_primary;
-
-        &:not(.text).iconOnly {
-            min-width: var(--size-m-height);
-        }
+        @mixin with-addons-padding 23px;
+        @mixin adjust-size var(--size-m-height);
+        @mixin addon-label-gap var(--gap-8);
     }
 
     &.size-64 {
-        &:not(.iconOnly):not(.text):not(.transparent) {
-            min-width: 160px;
-        }
-        &:not(.text) {
-            min-height: var(--size-l-height);
-
-            &:not(.iconOnly) {
-                padding: var(--gap-0) 31px;
-            }
-            &.withLeftAddons {
-                padding-left: 27px;
-            }
-            &.withRightAddons {
-                padding-right: 27px;
-            }
-        }
-
+        min-width: 160px;
+        padding: var(--gap-0) 31px;
         @mixin action_primary_large;
-
-        &:not(.text).iconOnly {
-            min-width: var(--size-l-height);
-        }
+        @mixin with-addons-padding 27px;
+        @mixin adjust-size var(--size-l-height);
+        @mixin addon-label-gap var(--gap-12);
     }
 
     &.size-72 {
-        &:not(.iconOnly):not(.text):not(.transparent) {
-            min-width: 168px;
-        }
-        &:not(.text) {
-            min-height: var(--size-xl-height);
-
-            &:not(.iconOnly) {
-                padding: var(--gap-0) 35px;
-            }
-            &.withLeftAddons {
-                padding-left: 31px;
-            }
-            &.withRightAddons {
-                &.size-72 {
-                    padding-right: 31px;
-                }
-            }
-        }
-
+        min-width: 168px;
+        padding: var(--gap-0) 35px;
         @mixin action_primary_large;
-
-        &:not(.text).iconOnly {
-            min-width: var(--size-xl-height);
-        }
+        @mixin with-addons-padding 31px;
+        @mixin adjust-size var(--size-xl-height);
+        @mixin addon-label-gap var(--gap-12);
     }
 
     /* Addons */
@@ -231,16 +159,4 @@
         flex-shrink: 0;
         align-items: center;
     }
-
-    @mixin addon-label-gap 6px;
-
-    &.size-48,
-    &.size-56 {
-        @mixin addon-label-gap var(--gap-8);
-    }
-
-    &.size-64,
-    &.size-72 {
-        @mixin addon-label-gap var(--gap-12);
-    }
 }

From d41ca4493f97e3f2b3e7bc4945c63940fe89847e Mon Sep 17 00:00:00 2001
From: hextion <100ishundred@gmail.com>
Date: Wed, 8 Oct 2025 12:07:05 +0300
Subject: [PATCH 10/11] fix: correct styles

---
 .../components/KeyPadButton/index.module.css   |  1 +
 .../components/KeyPadButton/index.module.css   |  1 +
 .../components/base-pattern-lock/Component.tsx | 18 ++++++++++--------
 .../base-pattern-lock/index.module.css         |  8 ++++++--
 .../src/desktop/desktop.module.css             |  2 +-
 .../src/mobile/mobile.module.css               |  8 +++++---
 6 files changed, 24 insertions(+), 14 deletions(-)

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 57c7c16ea9..d246f2e4af 100644
--- a/packages/pass-code-v1/src/components/KeyPadButton/index.module.css
+++ b/packages/pass-code-v1/src/components/KeyPadButton/index.module.css
@@ -2,6 +2,7 @@
 @import '../../vars.css';
 
 .component {
+    font: var(--font-family);
     @mixin action_component_secondary;
 
     border-radius: var(--border-radius-circle);
diff --git a/packages/pass-code/src/components/KeyPadButton/index.module.css b/packages/pass-code/src/components/KeyPadButton/index.module.css
index d2adc43d10..9a4056c7e0 100644
--- a/packages/pass-code/src/components/KeyPadButton/index.module.css
+++ b/packages/pass-code/src/components/KeyPadButton/index.module.css
@@ -2,6 +2,7 @@
 @import '../../vars.css';
 
 .component {
+    font: var(--font-family);
     @mixin action_component_secondary;
 
     border-radius: var(--border-radius-circle);
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..a29115ad42 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
@@ -128,14 +128,16 @@ export const BasePatternLock = forwardRef<
                 />
 
                 {showForgotCodeBtn ? (
-                    <ButtonMobile
-                        view='transparent'
-                        className={cn(commonStyles.forgotBtn, styles.forgotBtn)}
-                        onClick={onForgotBtnClick}
-                        dataTestId={getDataTestId(dataTestId, 'forgot-code-btn')}
-                    >
-                        {forgotCodeBtnText}
-                    </ButtonMobile>
+                    <div className={cn(commonStyles.forgotBtnContainer, styles.forgotBtnContainer)}>
+                        <ButtonMobile
+                            view='transparent'
+                            className={cn(commonStyles.forgotBtn, styles.forgotBtn)}
+                            onClick={onForgotBtnClick}
+                            dataTestId={getDataTestId(dataTestId, 'forgot-code-btn')}
+                        >
+                            {forgotCodeBtnText}
+                        </ButtonMobile>
+                    </div>
                 ) : (
                     <div
                         className={cn(commonStyles.forgotBtn, styles.forgotBtn, {
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..2b04d6c49f 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,11 @@
     color: var(--color-light-text-negative);
 }
 
-.forgotBtn {
-    display: block;
+.forgotBtnContainer {
+    display: flex;
+    justify-content: center;
+}
+
+.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..95138295c4 100644
--- a/packages/pattern-lock-v1/src/mobile/mobile.module.css
+++ b/packages/pattern-lock-v1/src/mobile/mobile.module.css
@@ -6,13 +6,15 @@
     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);
+    }
+    .forgotBtn.forgotBtn.forgotBtn {
         min-height: var(--size-s-height);
     }
 
@@ -22,7 +24,7 @@
 }
 
 @media screen and (min-width: 390px) {
-    .forgotBtn {
+    .forgotBtn.forgotBtn.forgotBtn {
         min-height: var(--size-m-height);
     }
 

From fd081195df4eb5f8fd01f3b80117db941080a850 Mon Sep 17 00:00:00 2001
From: hextion <100ishundred@gmail.com>
Date: Wed, 8 Oct 2025 12:34:47 +0300
Subject: [PATCH 11/11] fix: updated screenshots

---
 .../src/__snapshots__/component.test.tsx.snap |  4 ++--
 .../base-pattern-lock/Component.tsx           | 21 +++++++++----------
 .../base-pattern-lock/index.module.css        |  1 +
 .../src/mobile/mobile.module.css              |  2 ++
 ...s-default-with-forgot-code-button-snap.png |  4 ++--
 .../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 ----
 ...abs-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 ++--
 17 files changed, 43 insertions(+), 73 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-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 a29115ad42..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,9 +126,14 @@ export const BasePatternLock = forwardRef<
                     extraBounds={extraBounds}
                     hover={hover}
                 />
-
-                {showForgotCodeBtn ? (
-                    <div className={cn(commonStyles.forgotBtnContainer, styles.forgotBtnContainer)}>
+                <div
+                    className={cn(
+                        commonStyles.forgotBtnContainer,
+                        styles.forgotBtnContainer,
+                        styles.hiddenBtn,
+                    )}
+                >
+                    {showForgotCodeBtn && (
                         <ButtonMobile
                             view='transparent'
                             className={cn(commonStyles.forgotBtn, styles.forgotBtn)}
@@ -137,14 +142,8 @@ export const BasePatternLock = forwardRef<
                         >
                             {forgotCodeBtnText}
                         </ButtonMobile>
-                    </div>
-                ) : (
-                    <div
-                        className={cn(commonStyles.forgotBtn, styles.forgotBtn, {
-                            [styles.hiddenBtn]: Boolean(styles.hiddenBtn),
-                        })}
-                    />
-                )}
+                    )}
+                </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 2b04d6c49f..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
@@ -33,6 +33,7 @@
     justify-content: center;
 }
 
+.forgotBtnContainer,
 .forgotBtn.forgotBtn.forgotBtn {
     min-height: var(--size-xs-height);
 }
diff --git a/packages/pattern-lock-v1/src/mobile/mobile.module.css b/packages/pattern-lock-v1/src/mobile/mobile.module.css
index 95138295c4..9caaaa80e1 100644
--- a/packages/pattern-lock-v1/src/mobile/mobile.module.css
+++ b/packages/pattern-lock-v1/src/mobile/mobile.module.css
@@ -14,6 +14,7 @@
     .forgotBtnContainer {
         margin-top: var(--gap-32);
     }
+    .forgotBtnContainer,
     .forgotBtn.forgotBtn.forgotBtn {
         min-height: var(--size-s-height);
     }
@@ -24,6 +25,7 @@
 }
 
 @media screen and (min-width: 390px) {
+    .forgotBtnContainer,
     .forgotBtn.forgotBtn.forgotBtn {
         min-height: var(--size-m-height);
     }
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/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 & {
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 143035f38b..b3b418e19e 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:36430c5f8bb9992a75386cfd79cd5bdf9d6e52913a4b1fe999e9827595eeb44b
-size 6593
+oid sha256:b0a8bd828f30ae7bf0a13fec26d72979eae6925de9c7d4c8251fead5d6b2a2e5
+size 6579
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 6cc1c46f8d..b75c5098c5 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:e20d6ff21a16a231f1b463cb3d79d5cc8a4666a07087413fac8058f54ce73ff8
-size 6868
+oid sha256:9c77f5219ebce4542ff87cf5167a68e2cc36651f976fc8a6f8cc52c90ea093e2
+size 6841
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 6cc1c46f8d..b75c5098c5 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:e20d6ff21a16a231f1b463cb3d79d5cc8a4666a07087413fac8058f54ce73ff8
-size 6868
+oid sha256:9c77f5219ebce4542ff87cf5167a68e2cc36651f976fc8a6f8cc52c90ea093e2
+size 6841
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 578ed625cc..39d24c8173 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:e33a82912452b8838c5babf103b547bc5cc0d2730888c56820258aab890d14af
-size 6838
+oid sha256:4013e498eef8d58cf6dccfdb0b33c6fafda311abd5e45f806f0bf844b1f03fa9
+size 6824