From 24b52609f185cfe3dd6dcbffc2bdb7a89ccab944 Mon Sep 17 00:00:00 2001
From: Andrey Morozov <amje@yandex-team.ru>
Date: Mon, 29 Jan 2024 15:28:24 +0300
Subject: [PATCH] refactor!: rename .yc class prefix (#1260)

---
 .storybook/theme-addon/register.tsx           |  2 +-
 src/components/Alert/Alert.test.tsx           |  5 ++--
 .../Alert/__snapshots__/Alert.test.tsx.snap   | 30 +++++++++----------
 src/components/Avatar/Avatar.scss             |  2 +-
 src/components/Avatar/Avatar.tsx              |  4 +--
 .../Button/__tests__/Button.test.tsx          | 14 ++++-----
 src/components/Card/__tests__/Card.test.tsx   | 16 +++++-----
 .../Checkbox/__tests__/Checkbox.test.tsx      |  2 +-
 src/components/Disclosure/Disclosure.scss     |  2 +-
 src/components/Disclosure/cn.ts               |  4 +--
 .../__stories__/DropdownMenu.stories.scss     |  8 -----
 src/components/Label/README.md                |  6 ++--
 src/components/Menu/README.md                 |  2 +-
 src/components/Pagination/Pagination.scss     |  2 +-
 src/components/Pagination/Pagination.tsx      |  4 +--
 .../PaginationEllipsis.scss                   |  2 +-
 .../PaginationEllipsis/PaginationEllipsis.tsx |  4 +--
 .../PaginationInput/PaginationInput.scss      |  2 +-
 .../PaginationInput/PaginationInput.tsx       |  4 +--
 .../PaginationPage/PaginationPage.scss        |  2 +-
 .../PaginationPage/PaginationPage.tsx         |  4 +--
 .../PaginationPageOf/PaginationPageOf.scss    |  2 +-
 .../PaginationPageOf/PaginationPageOf.tsx     |  4 +--
 src/components/Persona/i18n/index.ts          |  4 +--
 src/components/Popover/Popover.scss           |  6 ++--
 .../Popover/__tests__/Popover.test.tsx        |  4 +--
 src/components/Radio/__tests__/Radio.test.tsx |  2 +-
 .../RadioGroup/__tests__/RadioGroup.test.tsx  |  4 +--
 src/components/Select/Select.scss             |  2 +-
 .../Select/__stories__/SelectShowcase.scss    |  4 +--
 .../components/EmptyOptions/EmptyOptions.scss |  2 +-
 .../components/EmptyOptions/EmptyOptions.tsx  |  2 +-
 .../components/SelectClear/SelectClear.scss   |  2 +-
 .../SelectControl/SelectControl.scss          |  4 +--
 .../components/SelectFilter/SelectFilter.scss |  2 +-
 .../components/SelectFilter/SelectFilter.tsx  |  2 +-
 .../components/SelectList/GroupLabel.tsx      |  2 +-
 .../components/SelectList/OptionWrap.tsx      |  2 +-
 .../components/SelectList/SelectList.scss     |  2 +-
 .../components/SelectPopup/SelectPopup.scss   |  2 +-
 .../components/SelectPopup/SelectPopup.tsx    |  4 +--
 src/components/Select/constants.ts            |  2 +-
 src/components/Table/__tests__/Table.test.tsx | 10 +++----
 src/components/Tabs/__tests__/Tabs.test.tsx   | 20 ++++++-------
 .../Tabs/__tests__/TabsItem.test.tsx          | 10 +++----
 .../Toaster/__stories__/ToasterShowcase.scss  |  2 +-
 .../Toaster/__stories__/ToasterShowcase.tsx   |  4 +--
 src/components/Toc/Toc.scss                   |  2 +-
 src/components/Toc/Toc.tsx                    |  4 +--
 src/components/Toc/TocItem/TocItem.scss       |  2 +-
 src/components/Toc/TocItem/TocItem.tsx        |  4 +--
 .../Toc/__stories__/Toc.stories.scss          |  2 +-
 .../Toc/__stories__/Toc.stories.tsx           |  4 +--
 src/components/User/User.scss                 |  2 +-
 src/components/User/User.tsx                  |  4 +--
 .../controls/TextArea/TextArea.scss           |  2 +-
 src/components/controls/TextArea/TextArea.tsx |  4 +--
 .../controls/TextArea/TextAreaControl.tsx     |  4 +--
 .../__tests__/TextInput.input.test.tsx        | 18 +++++------
 .../common/ClearButton/ClearButton.scss       |  2 +-
 .../common/ClearButton/ClearButton.tsx        |  4 +--
 .../controls/common/ClearButton/i18n/index.ts |  4 +--
 .../layout/spacing/spacing.test.tsx           |  6 ++--
 src/components/theme/ThemeProvider.tsx        |  7 ++---
 src/components/theme/dom-helpers.ts           | 14 +--------
 src/components/utils/cn.ts                    |  4 +--
 src/components/variables.scss                 |  7 +++--
 src/demo/DocsDecorator/DocsDecorator.scss     | 18 +++++------
 src/hooks/useUniqId/useUniqId.ts              |  4 +--
 styles/mixins.scss                            |  2 +-
 styles/styles.scss                            |  2 +-
 71 files changed, 165 insertions(+), 188 deletions(-)

diff --git a/.storybook/theme-addon/register.tsx b/.storybook/theme-addon/register.tsx
index 272b96ca5f..7c3ad306b4 100644
--- a/.storybook/theme-addon/register.tsx
+++ b/.storybook/theme-addon/register.tsx
@@ -7,7 +7,7 @@ import type {API} from '@storybook/api';
 import {getThemeType} from '../../src/components/theme/getThemeType';
 import {themes} from '../theme';
 
-const ADDON_ID = 'yc-theme-addon';
+const ADDON_ID = 'g-theme-addon';
 const TOOL_ID = `${ADDON_ID}tool`;
 
 addons.register(ADDON_ID, (api) => {
diff --git a/src/components/Alert/Alert.test.tsx b/src/components/Alert/Alert.test.tsx
index 5f89bb3cf5..fcc0a43ed2 100644
--- a/src/components/Alert/Alert.test.tsx
+++ b/src/components/Alert/Alert.test.tsx
@@ -6,6 +6,7 @@ import {render, screen} from '../../../test-utils/utils';
 import {Flex} from '../layout';
 
 import {Alert} from './Alert';
+import {bAlert} from './constants';
 import type {AlertTheme} from './types';
 
 const title = 'Where will you go, hero?';
@@ -80,7 +81,7 @@ describe('Alert', () => {
             );
 
             // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-            const icon = await container.querySelector('.yc-alert__icon');
+            const icon = await container.querySelector(`.${bAlert('icon')}`);
 
             expect(icon).toBeInTheDocument();
         },
@@ -90,7 +91,7 @@ describe('Alert', () => {
         const {container} = render(<Alert title={title} message={message} onClose={jest.fn()} />);
 
         // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-        const icon = await container.querySelector('.yc-alert__icon');
+        const icon = await container.querySelector(`.${bAlert('icon')}`);
 
         expect(icon).not.toBeInTheDocument();
     });
diff --git a/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/src/components/Alert/__snapshots__/Alert.test.tsx.snap
index 117c792346..eadecdf83e 100644
--- a/src/components/Alert/__snapshots__/Alert.test.tsx.snap
+++ b/src/components/Alert/__snapshots__/Alert.test.tsx.snap
@@ -3,18 +3,18 @@
 exports[`Alert has predicted styles if inline layout rendered 1`] = `
 <div>
   <div
-    class="yc-box yc-card yc-card_theme_danger yc-card_view_filled yc-card_type_container yc-card_size_m yc-alert yc-s__py_4 yc-s__px_5"
+    class="g-box g-card g-card_theme_danger g-card_view_filled g-card_type_container g-card_size_m g-alert g-s__py_4 g-s__px_5"
   >
     <div
-      class="yc-box yc-flex"
+      class="g-box g-flex"
       style="column-gap: 12px; row-gap: 12px; align-items: center;"
     >
       <div
-        class="yc-alert__icon yc-color-text yc-color-text_color_danger"
+        class="g-alert__icon g-color-text g-color-text_color_danger"
       >
         <svg
           aria-hidden="true"
-          class="yc-icon"
+          class="g-icon"
           fill="currentColor"
           height="18"
           stroke="none"
@@ -37,34 +37,34 @@ exports[`Alert has predicted styles if inline layout rendered 1`] = `
         </svg>
       </div>
       <div
-        class="yc-box yc-flex"
+        class="g-box g-flex"
         style="flex-direction: row; flex-grow: 1; column-gap: 20px; row-gap: 20px;"
       >
         <div
-          class="yc-box yc-flex yc-alert__text-content"
+          class="g-box g-flex g-alert__text-content"
           style="flex-grow: 1; column-gap: 8px; row-gap: 8px;"
         >
           <div
-            class="yc-box yc-flex"
+            class="g-box g-flex"
             style="flex-direction: column; flex-grow: 1; column-gap: 4px; row-gap: 4px; justify-content: center;"
           >
             <span
-              class="yc-text yc-text_variant_subheader-2 yc-alert__title"
+              class="g-text g-text_variant_subheader-2 g-alert__title"
             >
               Where will you go, hero?
             </span>
           </div>
         </div>
         <div
-          class="yc-box yc-flex yc-alert__actions yc-alert__actions_minContent"
+          class="g-box g-flex g-alert__actions g-alert__actions_minContent"
           style="flex-direction: row; flex-wrap: wrap; column-gap: 12px; row-gap: 12px; align-items: center;"
         >
           <button
-            class="yc-button yc-button_view_normal yc-button_size_m yc-button_pin_round-round"
+            class="g-button g-button_view_normal g-button_size_m g-button_pin_round-round"
             type="button"
           >
             <span
-              class="yc-button__text"
+              class="g-button__text"
             >
               To the right (lose the horse)
             </span>
@@ -72,18 +72,18 @@ exports[`Alert has predicted styles if inline layout rendered 1`] = `
         </div>
       </div>
       <button
-        class="yc-button yc-button_view_flat yc-button_size_m yc-button_pin_round-round"
+        class="g-button g-button_view_flat g-button_size_m g-button_pin_round-round"
         type="button"
       >
         <span
-          class="yc-button__icon"
+          class="g-button__icon"
         >
           <span
-            class="yc-button__icon-inner"
+            class="g-button__icon-inner"
           >
             <svg
               aria-hidden="true"
-              class="yc-icon yc-color-text yc-color-text_color_secondary"
+              class="g-icon g-color-text g-color-text_color_secondary"
               fill="currentColor"
               height="18"
               stroke="none"
diff --git a/src/components/Avatar/Avatar.scss b/src/components/Avatar/Avatar.scss
index d6e8b065c0..47fd304df2 100644
--- a/src/components/Avatar/Avatar.scss
+++ b/src/components/Avatar/Avatar.scss
@@ -1,6 +1,6 @@
 @use '../variables';
 
-$block: '.#{variables.$ns-new}avatar';
+$block: '.#{variables.$ns}avatar';
 
 #{$block} {
     --_--size: 32px;
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
index b32d3e6345..511249a565 100644
--- a/src/components/Avatar/Avatar.tsx
+++ b/src/components/Avatar/Avatar.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {blockNew} from '../utils/cn';
+import {block} from '../utils/cn';
 
 import {AvatarIcon} from './AvatarIcon';
 import {AvatarImage} from './AvatarImage';
@@ -9,7 +9,7 @@ import type {AvatarProps} from './types/main';
 
 import './Avatar.scss';
 
-const b = blockNew('avatar');
+const b = block('avatar');
 
 export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>((props, ref) => {
     const {
diff --git a/src/components/Button/__tests__/Button.test.tsx b/src/components/Button/__tests__/Button.test.tsx
index f4608150bd..939202e670 100644
--- a/src/components/Button/__tests__/Button.test.tsx
+++ b/src/components/Button/__tests__/Button.test.tsx
@@ -57,7 +57,7 @@ describe('Button', () => {
             render(<Button size={size} qa={qaId} />);
             const button = screen.getByTestId(qaId);
 
-            expect(button).toHaveClass(`yc-button_size_${size}`);
+            expect(button).toHaveClass(`g-button_size_${size}`);
         },
     );
 
@@ -65,14 +65,14 @@ describe('Button', () => {
         render(<Button view={view} qa={qaId} />);
         const button = screen.getByTestId(qaId);
 
-        expect(button).toHaveClass(`yc-button_view_${view}`);
+        expect(button).toHaveClass(`g-button_view_${view}`);
     });
 
     test.each(new Array<ButtonPin>(...buttonPins))('render with given "%s" pin', (pin) => {
         render(<Button pin={pin} qa={qaId} />);
         const button = screen.getByTestId(qaId);
 
-        expect(button).toHaveClass(`yc-button_pin_${pin}`);
+        expect(button).toHaveClass(`g-button_pin_${pin}`);
     });
 
     test.each(new Array<'button' | 'submit' | 'reset'>('button', 'submit', 'reset'))(
@@ -143,7 +143,7 @@ describe('Button', () => {
         const button = screen.getByRole('button');
 
         expect(button).toBeVisible();
-        expect(button).toHaveClass('yc-button_selected');
+        expect(button).toHaveClass('g-button_selected');
     });
 
     test('should render <a /> tag', () => {
@@ -163,7 +163,7 @@ describe('Button', () => {
         const button = screen.getByRole('button');
 
         expect(button).toBeVisible();
-        expect(button).not.toHaveClass('yc-button_selected');
+        expect(button).not.toHaveClass('g-button_selected');
     });
 
     test('loading when loading=true prop is given', () => {
@@ -171,7 +171,7 @@ describe('Button', () => {
         const button = screen.getByRole('button');
 
         expect(button).toBeVisible();
-        expect(button).toHaveClass('yc-button_loading');
+        expect(button).toHaveClass('g-button_loading');
     });
 
     test('not loading when loading=false prop is given', () => {
@@ -179,7 +179,7 @@ describe('Button', () => {
         const button = screen.getByRole('button');
 
         expect(button).toBeVisible();
-        expect(button).not.toHaveClass('yc-button_loading');
+        expect(button).not.toHaveClass('g-button_loading');
     });
 
     test('disabled when disabled=true prop is given', () => {
diff --git a/src/components/Card/__tests__/Card.test.tsx b/src/components/Card/__tests__/Card.test.tsx
index d1c4597aa7..e5fc79762d 100644
--- a/src/components/Card/__tests__/Card.test.tsx
+++ b/src/components/Card/__tests__/Card.test.tsx
@@ -34,7 +34,7 @@ describe('Card', () => {
         );
         const card = screen.getByTestId(qaId);
 
-        expect(card).toHaveClass(`yc-card_theme_${theme}`);
+        expect(card).toHaveClass(`g-card_theme_${theme}`);
     });
 
     test.each(cardSizes)('render with given "%s" size', (size) => {
@@ -45,7 +45,7 @@ describe('Card', () => {
         );
         const card = screen.getByTestId(qaId);
 
-        expect(card).toHaveClass(`yc-card_size_${size}`);
+        expect(card).toHaveClass(`g-card_size_${size}`);
     });
 
     test.each(cardViews)('render with given "%s" view', (view) => {
@@ -56,7 +56,7 @@ describe('Card', () => {
         );
         const card = screen.getByTestId(qaId);
 
-        expect(card).toHaveClass(`yc-card_view_${view}`);
+        expect(card).toHaveClass(`g-card_view_${view}`);
     });
 
     test.each(cardTypes)('render with given "%s" type', (type) => {
@@ -67,7 +67,7 @@ describe('Card', () => {
         );
         const card = screen.getByTestId(qaId);
 
-        expect(card).toHaveClass(`yc-card_type_${type}`);
+        expect(card).toHaveClass(`g-card_type_${type}`);
     });
 
     test('selected when selected=true prop is given', () => {
@@ -79,7 +79,7 @@ describe('Card', () => {
         const card = screen.getByText(cardText);
 
         expect(card).toBeVisible();
-        expect(card).toHaveClass('yc-card_selected');
+        expect(card).toHaveClass('g-card_selected');
     });
 
     test('not selected when selected=false prop is given', () => {
@@ -91,7 +91,7 @@ describe('Card', () => {
         const card = screen.getByText(cardText);
 
         expect(card).toBeVisible();
-        expect(card).not.toHaveClass('yc-card_selected');
+        expect(card).not.toHaveClass('g-card_selected');
     });
 
     test('disabled when disabled=true prop is given', () => {
@@ -102,7 +102,7 @@ describe('Card', () => {
         );
         const card = screen.getByText(cardText);
 
-        expect(card).toHaveClass('yc-card_disabled');
+        expect(card).toHaveClass('g-card_disabled');
     });
 
     test('not disabled when disabled=false prop is given', () => {
@@ -113,7 +113,7 @@ describe('Card', () => {
         );
         const card = screen.getByText(cardText);
 
-        expect(card).not.toHaveClass('yc-card_disabled');
+        expect(card).not.toHaveClass('g-card_disabled');
     });
 
     test('show given content', () => {
diff --git a/src/components/Checkbox/__tests__/Checkbox.test.tsx b/src/components/Checkbox/__tests__/Checkbox.test.tsx
index d0d75146d8..b609f898f8 100644
--- a/src/components/Checkbox/__tests__/Checkbox.test.tsx
+++ b/src/components/Checkbox/__tests__/Checkbox.test.tsx
@@ -22,7 +22,7 @@ describe('Checkbox', () => {
         render(<Checkbox size={size} qa={qaId} />);
         const component = screen.getByTestId(qaId);
 
-        expect(component).toHaveClass(`yc-checkbox_size_${size}`);
+        expect(component).toHaveClass(`g-checkbox_size_${size}`);
     });
 
     test('disabled when disabled=true prop is given', () => {
diff --git a/src/components/Disclosure/Disclosure.scss b/src/components/Disclosure/Disclosure.scss
index 19a8e1ee5f..447e2dd195 100644
--- a/src/components/Disclosure/Disclosure.scss
+++ b/src/components/Disclosure/Disclosure.scss
@@ -1,7 +1,7 @@
 @use '../variables';
 @use '../../../styles/mixins';
 
-$block: '.#{variables.$ns-new}disclosure';
+$block: '.#{variables.$ns}disclosure';
 $gap: 8px;
 
 #{$block} {
diff --git a/src/components/Disclosure/cn.ts b/src/components/Disclosure/cn.ts
index 2866e885b0..78570b57f6 100644
--- a/src/components/Disclosure/cn.ts
+++ b/src/components/Disclosure/cn.ts
@@ -1,3 +1,3 @@
-import {blockNew} from '../utils/cn';
+import {block} from '../utils/cn';
 
-export const b = blockNew('disclosure');
+export const b = block('disclosure');
diff --git a/src/components/DropdownMenu/__stories__/DropdownMenu.stories.scss b/src/components/DropdownMenu/__stories__/DropdownMenu.stories.scss
index e77519c24d..c2b57137cd 100644
--- a/src/components/DropdownMenu/__stories__/DropdownMenu.stories.scss
+++ b/src/components/DropdownMenu/__stories__/DropdownMenu.stories.scss
@@ -1,14 +1,6 @@
 .dropdown-menu-stories {
     &__label-switcher-menu {
         width: 150px;
-
-        .yc-menu__list-item:nth-child(even) {
-            background-color: var(--g-color-base-generic);
-        }
-
-        .yc-menu__list-item:hover {
-            background-color: var(--g-color-base-selection);
-        }
     }
 
     &__label-switcher-switcher {
diff --git a/src/components/Label/README.md b/src/components/Label/README.md
index 00e3cf7390..e6aebf04b1 100644
--- a/src/components/Label/README.md
+++ b/src/components/Label/README.md
@@ -110,21 +110,21 @@ You can add an icon with the `icon` property. To do so, use the [`Icon`](../Icon
 >
     <UIKit.Label icon={
         <UIKit.Icon data={() => (
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" class="yc-icon" fill="currentColor" stroke="none" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.199 2H8.8a.2.2 0 0 1 .2.2c0 1.808 1.958 2.939 3.524 2.034a.199.199 0 0 1 .271.073l.802 1.388a.199.199 0 0 1-.073.272c-1.566.904-1.566 3.164 0 4.069a.199.199 0 0 1 .073.271l-.802 1.388a.199.199 0 0 1-.271.073C10.958 10.863 9 11.993 9 13.8a.2.2 0 0 1-.199.2H7.2a.199.199 0 0 1-.2-.2c0-1.808-1.958-2.938-3.524-2.034a.199.199 0 0 1-.272-.073l-.8-1.388a.199.199 0 0 1 .072-.271c1.566-.905 1.566-3.165 0-4.07a.199.199 0 0 1-.073-.271l.801-1.388a.199.199 0 0 1 .272-.073C5.042 5.138 7 4.007 7 2.2c0-.11.089-.199.199-.199ZM5.5 2.2c0-.94.76-1.7 1.699-1.7H8.8c.94 0 1.7.76 1.7 1.7a.85.85 0 0 0 1.274.735 1.699 1.699 0 0 1 2.32.622l.802 1.388c.469.813.19 1.851-.622 2.32a.85.85 0 0 0 0 1.472 1.7 1.7 0 0 1 .622 2.32l-.802 1.388a1.699 1.699 0 0 1-2.32.622.85.85 0 0 0-1.274.735c0 .939-.76 1.7-1.699 1.7H7.2a1.7 1.7 0 0 1-1.699-1.7.85.85 0 0 0-1.274-.735 1.698 1.698 0 0 1-2.32-.622l-.802-1.388a1.699 1.699 0 0 1 .622-2.32.85.85 0 0 0 0-1.471 1.699 1.699 0 0 1-.622-2.321l.801-1.388a1.699 1.699 0 0 1 2.32-.622A.85.85 0 0 0 5.5 2.2Zm4 5.8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" clip-rule="evenodd"></path></svg></svg>
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" class="g-icon" fill="currentColor" stroke="none" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.199 2H8.8a.2.2 0 0 1 .2.2c0 1.808 1.958 2.939 3.524 2.034a.199.199 0 0 1 .271.073l.802 1.388a.199.199 0 0 1-.073.272c-1.566.904-1.566 3.164 0 4.069a.199.199 0 0 1 .073.271l-.802 1.388a.199.199 0 0 1-.271.073C10.958 10.863 9 11.993 9 13.8a.2.2 0 0 1-.199.2H7.2a.199.199 0 0 1-.2-.2c0-1.808-1.958-2.938-3.524-2.034a.199.199 0 0 1-.272-.073l-.8-1.388a.199.199 0 0 1 .072-.271c1.566-.905 1.566-3.165 0-4.07a.199.199 0 0 1-.073-.271l.801-1.388a.199.199 0 0 1 .272-.073C5.042 5.138 7 4.007 7 2.2c0-.11.089-.199.199-.199ZM5.5 2.2c0-.94.76-1.7 1.699-1.7H8.8c.94 0 1.7.76 1.7 1.7a.85.85 0 0 0 1.274.735 1.699 1.699 0 0 1 2.32.622l.802 1.388c.469.813.19 1.851-.622 2.32a.85.85 0 0 0 0 1.472 1.7 1.7 0 0 1 .622 2.32l-.802 1.388a1.699 1.699 0 0 1-2.32.622.85.85 0 0 0-1.274.735c0 .939-.76 1.7-1.699 1.7H7.2a1.7 1.7 0 0 1-1.699-1.7.85.85 0 0 0-1.274-.735 1.698 1.698 0 0 1-2.32-.622l-.802-1.388a1.699 1.699 0 0 1 .622-2.32.85.85 0 0 0 0-1.471 1.699 1.699 0 0 1-.622-2.321l.801-1.388a1.699 1.699 0 0 1 2.32-.622A.85.85 0 0 0 5.5 2.2Zm4 5.8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" clip-rule="evenodd"></path></svg></svg>
         )} size={16} />
     }>
         <span>Icon</span>
     </UIKit.Label>
     <UIKit.Label type="close" icon={
         <UIKit.Icon data={() => (
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" class="yc-icon" fill="currentColor" stroke="none" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.199 2H8.8a.2.2 0 0 1 .2.2c0 1.808 1.958 2.939 3.524 2.034a.199.199 0 0 1 .271.073l.802 1.388a.199.199 0 0 1-.073.272c-1.566.904-1.566 3.164 0 4.069a.199.199 0 0 1 .073.271l-.802 1.388a.199.199 0 0 1-.271.073C10.958 10.863 9 11.993 9 13.8a.2.2 0 0 1-.199.2H7.2a.199.199 0 0 1-.2-.2c0-1.808-1.958-2.938-3.524-2.034a.199.199 0 0 1-.272-.073l-.8-1.388a.199.199 0 0 1 .072-.271c1.566-.905 1.566-3.165 0-4.07a.199.199 0 0 1-.073-.271l.801-1.388a.199.199 0 0 1 .272-.073C5.042 5.138 7 4.007 7 2.2c0-.11.089-.199.199-.199ZM5.5 2.2c0-.94.76-1.7 1.699-1.7H8.8c.94 0 1.7.76 1.7 1.7a.85.85 0 0 0 1.274.735 1.699 1.699 0 0 1 2.32.622l.802 1.388c.469.813.19 1.851-.622 2.32a.85.85 0 0 0 0 1.472 1.7 1.7 0 0 1 .622 2.32l-.802 1.388a1.699 1.699 0 0 1-2.32.622.85.85 0 0 0-1.274.735c0 .939-.76 1.7-1.699 1.7H7.2a1.7 1.7 0 0 1-1.699-1.7.85.85 0 0 0-1.274-.735 1.698 1.698 0 0 1-2.32-.622l-.802-1.388a1.699 1.699 0 0 1 .622-2.32.85.85 0 0 0 0-1.471 1.699 1.699 0 0 1-.622-2.321l.801-1.388a1.699 1.699 0 0 1 2.32-.622A.85.85 0 0 0 5.5 2.2Zm4 5.8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" clip-rule="evenodd"></path></svg></svg>
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" class="g-icon" fill="currentColor" stroke="none" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.199 2H8.8a.2.2 0 0 1 .2.2c0 1.808 1.958 2.939 3.524 2.034a.199.199 0 0 1 .271.073l.802 1.388a.199.199 0 0 1-.073.272c-1.566.904-1.566 3.164 0 4.069a.199.199 0 0 1 .073.271l-.802 1.388a.199.199 0 0 1-.271.073C10.958 10.863 9 11.993 9 13.8a.2.2 0 0 1-.199.2H7.2a.199.199 0 0 1-.2-.2c0-1.808-1.958-2.938-3.524-2.034a.199.199 0 0 1-.272-.073l-.8-1.388a.199.199 0 0 1 .072-.271c1.566-.905 1.566-3.165 0-4.07a.199.199 0 0 1-.073-.271l.801-1.388a.199.199 0 0 1 .272-.073C5.042 5.138 7 4.007 7 2.2c0-.11.089-.199.199-.199ZM5.5 2.2c0-.94.76-1.7 1.699-1.7H8.8c.94 0 1.7.76 1.7 1.7a.85.85 0 0 0 1.274.735 1.699 1.699 0 0 1 2.32.622l.802 1.388c.469.813.19 1.851-.622 2.32a.85.85 0 0 0 0 1.472 1.7 1.7 0 0 1 .622 2.32l-.802 1.388a1.699 1.699 0 0 1-2.32.622.85.85 0 0 0-1.274.735c0 .939-.76 1.7-1.699 1.7H7.2a1.7 1.7 0 0 1-1.699-1.7.85.85 0 0 0-1.274-.735 1.698 1.698 0 0 1-2.32-.622l-.802-1.388a1.699 1.699 0 0 1 .622-2.32.85.85 0 0 0 0-1.471 1.699 1.699 0 0 1-.622-2.321l.801-1.388a1.699 1.699 0 0 1 2.32-.622A.85.85 0 0 0 5.5 2.2Zm4 5.8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" clip-rule="evenodd"></path></svg></svg>
         )} size={16} />
     }>
         <span>Icon and close</span>
     </UIKit.Label>
     <UIKit.Label type="copy" icon={
         <UIKit.Icon data={() => (
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" class="yc-icon" fill="currentColor" stroke="none" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.199 2H8.8a.2.2 0 0 1 .2.2c0 1.808 1.958 2.939 3.524 2.034a.199.199 0 0 1 .271.073l.802 1.388a.199.199 0 0 1-.073.272c-1.566.904-1.566 3.164 0 4.069a.199.199 0 0 1 .073.271l-.802 1.388a.199.199 0 0 1-.271.073C10.958 10.863 9 11.993 9 13.8a.2.2 0 0 1-.199.2H7.2a.199.199 0 0 1-.2-.2c0-1.808-1.958-2.938-3.524-2.034a.199.199 0 0 1-.272-.073l-.8-1.388a.199.199 0 0 1 .072-.271c1.566-.905 1.566-3.165 0-4.07a.199.199 0 0 1-.073-.271l.801-1.388a.199.199 0 0 1 .272-.073C5.042 5.138 7 4.007 7 2.2c0-.11.089-.199.199-.199ZM5.5 2.2c0-.94.76-1.7 1.699-1.7H8.8c.94 0 1.7.76 1.7 1.7a.85.85 0 0 0 1.274.735 1.699 1.699 0 0 1 2.32.622l.802 1.388c.469.813.19 1.851-.622 2.32a.85.85 0 0 0 0 1.472 1.7 1.7 0 0 1 .622 2.32l-.802 1.388a1.699 1.699 0 0 1-2.32.622.85.85 0 0 0-1.274.735c0 .939-.76 1.7-1.699 1.7H7.2a1.7 1.7 0 0 1-1.699-1.7.85.85 0 0 0-1.274-.735 1.698 1.698 0 0 1-2.32-.622l-.802-1.388a1.699 1.699 0 0 1 .622-2.32.85.85 0 0 0 0-1.471 1.699 1.699 0 0 1-.622-2.321l.801-1.388a1.699 1.699 0 0 1 2.32-.622A.85.85 0 0 0 5.5 2.2Zm4 5.8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" clip-rule="evenodd"></path></svg></svg>
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" class="g-icon" fill="currentColor" stroke="none" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.199 2H8.8a.2.2 0 0 1 .2.2c0 1.808 1.958 2.939 3.524 2.034a.199.199 0 0 1 .271.073l.802 1.388a.199.199 0 0 1-.073.272c-1.566.904-1.566 3.164 0 4.069a.199.199 0 0 1 .073.271l-.802 1.388a.199.199 0 0 1-.271.073C10.958 10.863 9 11.993 9 13.8a.2.2 0 0 1-.199.2H7.2a.199.199 0 0 1-.2-.2c0-1.808-1.958-2.938-3.524-2.034a.199.199 0 0 1-.272-.073l-.8-1.388a.199.199 0 0 1 .072-.271c1.566-.905 1.566-3.165 0-4.07a.199.199 0 0 1-.073-.271l.801-1.388a.199.199 0 0 1 .272-.073C5.042 5.138 7 4.007 7 2.2c0-.11.089-.199.199-.199ZM5.5 2.2c0-.94.76-1.7 1.699-1.7H8.8c.94 0 1.7.76 1.7 1.7a.85.85 0 0 0 1.274.735 1.699 1.699 0 0 1 2.32.622l.802 1.388c.469.813.19 1.851-.622 2.32a.85.85 0 0 0 0 1.472 1.7 1.7 0 0 1 .622 2.32l-.802 1.388a1.699 1.699 0 0 1-2.32.622.85.85 0 0 0-1.274.735c0 .939-.76 1.7-1.699 1.7H7.2a1.7 1.7 0 0 1-1.699-1.7.85.85 0 0 0-1.274-.735 1.698 1.698 0 0 1-2.32-.622l-.802-1.388a1.699 1.699 0 0 1 .622-2.32.85.85 0 0 0 0-1.471 1.699 1.699 0 0 1-.622-2.321l.801-1.388a1.699 1.699 0 0 1 2.32-.622A.85.85 0 0 0 5.5 2.2Zm4 5.8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" clip-rule="evenodd"></path></svg></svg>
         )} size={16} />
     }>
         <span>Icon and copy</span>
diff --git a/src/components/Menu/README.md b/src/components/Menu/README.md
index 0e3efe503e..618b115510 100644
--- a/src/components/Menu/README.md
+++ b/src/components/Menu/README.md
@@ -147,7 +147,7 @@ The `iconStart` or `iconEnd` properties is used to display an icon at the start
     <UIKit.Menu>
         <UIKit.Menu.Item iconStart={
             <UIKit.Icon data={() => (
-                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" class="yc-icon" fill="currentColor" stroke="none" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.199 2H8.8a.2.2 0 0 1 .2.2c0 1.808 1.958 2.939 3.524 2.034a.199.199 0 0 1 .271.073l.802 1.388a.199.199 0 0 1-.073.272c-1.566.904-1.566 3.164 0 4.069a.199.199 0 0 1 .073.271l-.802 1.388a.199.199 0 0 1-.271.073C10.958 10.863 9 11.993 9 13.8a.2.2 0 0 1-.199.2H7.2a.199.199 0 0 1-.2-.2c0-1.808-1.958-2.938-3.524-2.034a.199.199 0 0 1-.272-.073l-.8-1.388a.199.199 0 0 1 .072-.271c1.566-.905 1.566-3.165 0-4.07a.199.199 0 0 1-.073-.271l.801-1.388a.199.199 0 0 1 .272-.073C5.042 5.138 7 4.007 7 2.2c0-.11.089-.199.199-.199ZM5.5 2.2c0-.94.76-1.7 1.699-1.7H8.8c.94 0 1.7.76 1.7 1.7a.85.85 0 0 0 1.274.735 1.699 1.699 0 0 1 2.32.622l.802 1.388c.469.813.19 1.851-.622 2.32a.85.85 0 0 0 0 1.472 1.7 1.7 0 0 1 .622 2.32l-.802 1.388a1.699 1.699 0 0 1-2.32.622.85.85 0 0 0-1.274.735c0 .939-.76 1.7-1.699 1.7H7.2a1.7 1.7 0 0 1-1.699-1.7.85.85 0 0 0-1.274-.735 1.698 1.698 0 0 1-2.32-.622l-.802-1.388a1.699 1.699 0 0 1 .622-2.32.85.85 0 0 0 0-1.471 1.699 1.699 0 0 1-.622-2.321l.801-1.388a1.699 1.699 0 0 1 2.32-.622A.85.85 0 0 0 5.5 2.2Zm4 5.8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" clip-rule="evenodd"></path></svg></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" class="g-icon" fill="currentColor" stroke="none" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M7.199 2H8.8a.2.2 0 0 1 .2.2c0 1.808 1.958 2.939 3.524 2.034a.199.199 0 0 1 .271.073l.802 1.388a.199.199 0 0 1-.073.272c-1.566.904-1.566 3.164 0 4.069a.199.199 0 0 1 .073.271l-.802 1.388a.199.199 0 0 1-.271.073C10.958 10.863 9 11.993 9 13.8a.2.2 0 0 1-.199.2H7.2a.199.199 0 0 1-.2-.2c0-1.808-1.958-2.938-3.524-2.034a.199.199 0 0 1-.272-.073l-.8-1.388a.199.199 0 0 1 .072-.271c1.566-.905 1.566-3.165 0-4.07a.199.199 0 0 1-.073-.271l.801-1.388a.199.199 0 0 1 .272-.073C5.042 5.138 7 4.007 7 2.2c0-.11.089-.199.199-.199ZM5.5 2.2c0-.94.76-1.7 1.699-1.7H8.8c.94 0 1.7.76 1.7 1.7a.85.85 0 0 0 1.274.735 1.699 1.699 0 0 1 2.32.622l.802 1.388c.469.813.19 1.851-.622 2.32a.85.85 0 0 0 0 1.472 1.7 1.7 0 0 1 .622 2.32l-.802 1.388a1.699 1.699 0 0 1-2.32.622.85.85 0 0 0-1.274.735c0 .939-.76 1.7-1.699 1.7H7.2a1.7 1.7 0 0 1-1.699-1.7.85.85 0 0 0-1.274-.735 1.698 1.698 0 0 1-2.32-.622l-.802-1.388a1.699 1.699 0 0 1 .622-2.32.85.85 0 0 0 0-1.471 1.699 1.699 0 0 1-.622-2.321l.801-1.388a1.699 1.699 0 0 1 2.32-.622A.85.85 0 0 0 5.5 2.2Zm4 5.8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" clip-rule="evenodd"></path></svg></svg>
             )} size={16} />
         }>
             Item with icon
diff --git a/src/components/Pagination/Pagination.scss b/src/components/Pagination/Pagination.scss
index 481aca3450..ec2dfc9341 100644
--- a/src/components/Pagination/Pagination.scss
+++ b/src/components/Pagination/Pagination.scss
@@ -1,6 +1,6 @@
 @use '../variables';
 
-$block: '.#{variables.$ns-new}pagination';
+$block: '.#{variables.$ns}pagination';
 
 #{$block} {
     display: flex;
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 8086247184..8927af82ac 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {useMobile} from '../mobile';
-import {blockNew} from '../utils/cn';
+import {block} from '../utils/cn';
 
 import {
     PaginationButton,
@@ -16,7 +16,7 @@ import type {PaginationProps} from './types';
 
 import './Pagination.scss';
 
-const b = blockNew('pagination');
+const b = block('pagination');
 
 export const Pagination = ({
     page,
diff --git a/src/components/Pagination/components/PaginationEllipsis/PaginationEllipsis.scss b/src/components/Pagination/components/PaginationEllipsis/PaginationEllipsis.scss
index 973f2b824a..f7940fb8a7 100644
--- a/src/components/Pagination/components/PaginationEllipsis/PaginationEllipsis.scss
+++ b/src/components/Pagination/components/PaginationEllipsis/PaginationEllipsis.scss
@@ -1,7 +1,7 @@
 @use '../../../../../styles/mixins';
 @use '../../../variables';
 
-$block: '.#{variables.$ns-new}pagination-ellipsis';
+$block: '.#{variables.$ns}pagination-ellipsis';
 
 #{$block} {
     @include mixins.text-body-1;
diff --git a/src/components/Pagination/components/PaginationEllipsis/PaginationEllipsis.tsx b/src/components/Pagination/components/PaginationEllipsis/PaginationEllipsis.tsx
index 00a40f8be8..0a99fe40c5 100644
--- a/src/components/Pagination/components/PaginationEllipsis/PaginationEllipsis.tsx
+++ b/src/components/Pagination/components/PaginationEllipsis/PaginationEllipsis.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 
-import {blockNew} from '../../../utils/cn';
+import {block} from '../../../utils/cn';
 import type {PaginationSize} from '../../types';
 
 import './PaginationEllipsis.scss';
 
-const b = blockNew('pagination-ellipsis');
+const b = block('pagination-ellipsis');
 
 type Props = {
     size: PaginationSize;
diff --git a/src/components/Pagination/components/PaginationInput/PaginationInput.scss b/src/components/Pagination/components/PaginationInput/PaginationInput.scss
index 5ce61956df..2907e28832 100644
--- a/src/components/Pagination/components/PaginationInput/PaginationInput.scss
+++ b/src/components/Pagination/components/PaginationInput/PaginationInput.scss
@@ -1,6 +1,6 @@
 @use '../../../variables';
 
-$block: '.#{variables.$ns-new}pagination-input';
+$block: '.#{variables.$ns}pagination-input';
 
 #{$block} {
     &#{$block}_size_m {
diff --git a/src/components/Pagination/components/PaginationInput/PaginationInput.tsx b/src/components/Pagination/components/PaginationInput/PaginationInput.tsx
index 76ec8eac6b..85d45f5ef9 100644
--- a/src/components/Pagination/components/PaginationInput/PaginationInput.tsx
+++ b/src/components/Pagination/components/PaginationInput/PaginationInput.tsx
@@ -2,13 +2,13 @@ import React from 'react';
 
 import {KeyCode} from '../../../../constants';
 import {TextInput, TextInputProps} from '../../../controls';
-import {blockNew} from '../../../utils/cn';
+import {block} from '../../../utils/cn';
 import i18n from '../../i18n';
 import type {PaginationProps, PaginationSize} from '../../types';
 
 import './PaginationInput.scss';
 
-const b = blockNew('pagination-input');
+const b = block('pagination-input');
 
 type Props = {
     numberOfPages: number;
diff --git a/src/components/Pagination/components/PaginationPage/PaginationPage.scss b/src/components/Pagination/components/PaginationPage/PaginationPage.scss
index 43713c2f99..6abfa0f10b 100644
--- a/src/components/Pagination/components/PaginationPage/PaginationPage.scss
+++ b/src/components/Pagination/components/PaginationPage/PaginationPage.scss
@@ -1,7 +1,7 @@
 @use '../../../../../styles/mixins';
 @use '../../../variables';
 
-$block: '.#{variables.$ns-new}pagination-page';
+$block: '.#{variables.$ns}pagination-page';
 
 #{$block} {
     &__simple {
diff --git a/src/components/Pagination/components/PaginationPage/PaginationPage.tsx b/src/components/Pagination/components/PaginationPage/PaginationPage.tsx
index ba320d77c4..1d0a20eccf 100644
--- a/src/components/Pagination/components/PaginationPage/PaginationPage.tsx
+++ b/src/components/Pagination/components/PaginationPage/PaginationPage.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 
 import {Button} from '../../../Button';
-import {blockNew} from '../../../utils/cn';
+import {block} from '../../../utils/cn';
 import type {PageItem, PaginationProps, PaginationSize} from '../../types';
 
 import './PaginationPage.scss';
 
-const b = blockNew('pagination-page');
+const b = block('pagination-page');
 
 type Props = {
     item: PageItem;
diff --git a/src/components/Pagination/components/PaginationPageOf/PaginationPageOf.scss b/src/components/Pagination/components/PaginationPageOf/PaginationPageOf.scss
index 3b9e62c848..9e9363fc4d 100644
--- a/src/components/Pagination/components/PaginationPageOf/PaginationPageOf.scss
+++ b/src/components/Pagination/components/PaginationPageOf/PaginationPageOf.scss
@@ -1,7 +1,7 @@
 @use '../../../../../styles/mixins';
 @use '../../../variables';
 
-$block: '.#{variables.$ns-new}pagination-page-of';
+$block: '.#{variables.$ns}pagination-page-of';
 
 #{$block} {
     @include mixins.text-body-1;
diff --git a/src/components/Pagination/components/PaginationPageOf/PaginationPageOf.tsx b/src/components/Pagination/components/PaginationPageOf/PaginationPageOf.tsx
index 9671b31c22..e0590f88f5 100644
--- a/src/components/Pagination/components/PaginationPageOf/PaginationPageOf.tsx
+++ b/src/components/Pagination/components/PaginationPageOf/PaginationPageOf.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 
-import {blockNew} from '../../../utils/cn';
+import {block} from '../../../utils/cn';
 import i18n from '../../i18n';
 import type {PaginationSize} from '../../types';
 
 import './PaginationPageOf.scss';
 
-const b = blockNew('pagination-page-of');
+const b = block('pagination-page-of');
 
 type Props = {
     size: PaginationSize;
diff --git a/src/components/Persona/i18n/index.ts b/src/components/Persona/i18n/index.ts
index 0a7c69da10..8e73ff64a0 100644
--- a/src/components/Persona/i18n/index.ts
+++ b/src/components/Persona/i18n/index.ts
@@ -1,7 +1,7 @@
 import {addComponentKeysets} from '../../utils/addComponentKeysets';
-import {NAMESPACE_NEW} from '../../utils/cn';
+import {NAMESPACE} from '../../utils/cn';
 
 import en from './en.json';
 import ru from './ru.json';
 
-export default addComponentKeysets({en, ru}, `${NAMESPACE_NEW}persona-remove-button`);
+export default addComponentKeysets({en, ru}, `${NAMESPACE}persona-remove-button`);
diff --git a/src/components/Popover/Popover.scss b/src/components/Popover/Popover.scss
index 0521973d7b..006b201ef3 100644
--- a/src/components/Popover/Popover.scss
+++ b/src/components/Popover/Popover.scss
@@ -98,7 +98,7 @@ $block: '.#{variables.$ns}popover';
                     color: var(--g-color-text-primary);
                 }
 
-                #{$class}__tooltip-content a:not(.yc-button) {
+                #{$class}__tooltip-content a:not(.g-button) {
                     @at-root #{$tooltip_block}_force-links-appearance#{&} {
                         text-decoration: none;
                         color: var(--g-color-text-link);
@@ -120,7 +120,7 @@ $block: '.#{variables.$ns}popover';
                 --g-popup-border-color: var(--g-color-base-brand);
                 color: var(--g-color-text-light-primary);
 
-                #{$class}__tooltip-content a:not(.yc-button) {
+                #{$class}__tooltip-content a:not(.g-button) {
                     @include mixins.text-accent;
                     color: var(--g-color-text-light-primary);
 
@@ -129,7 +129,7 @@ $block: '.#{variables.$ns}popover';
                     }
                 }
 
-                .yc-link {
+                .g-link {
                     color: var(--g-color-text-light-primary);
 
                     &:hover {
diff --git a/src/components/Popover/__tests__/Popover.test.tsx b/src/components/Popover/__tests__/Popover.test.tsx
index 5d6103f27f..b9dbac32c8 100644
--- a/src/components/Popover/__tests__/Popover.test.tsx
+++ b/src/components/Popover/__tests__/Popover.test.tsx
@@ -29,14 +29,14 @@ const waitForTooltipOpenedStateChange = (shouldOpen?: boolean) =>
 const checkIfPopoverOpened = () => {
     const popover = screen.queryByTestId('popover-tooltip');
 
-    expect(popover).toHaveClass('yc-popup_open');
+    expect(popover).toHaveClass('g-popup_open');
 };
 
 const checkIfPopoverClosed = () => {
     const popover = screen.queryByTestId('popover-tooltip');
 
     if (popover) {
-        expect(popover).not.toHaveClass('yc-popup_open');
+        expect(popover).not.toHaveClass('g-popup_open');
     } else {
         expect(true).toBe(true);
     }
diff --git a/src/components/Radio/__tests__/Radio.test.tsx b/src/components/Radio/__tests__/Radio.test.tsx
index b8a85572b3..3596a84694 100644
--- a/src/components/Radio/__tests__/Radio.test.tsx
+++ b/src/components/Radio/__tests__/Radio.test.tsx
@@ -25,7 +25,7 @@ describe('Radio', () => {
         render(<Radio value={value} size={size} qa={qaId} />);
         const component = screen.getByTestId(qaId);
 
-        expect(component).toHaveClass(`yc-radio_size_${size}`);
+        expect(component).toHaveClass(`g-radio_size_${size}`);
     });
 
     test('disabled when disabled=true prop is given', () => {
diff --git a/src/components/RadioGroup/__tests__/RadioGroup.test.tsx b/src/components/RadioGroup/__tests__/RadioGroup.test.tsx
index 8f8d8fb881..c397e7089c 100644
--- a/src/components/RadioGroup/__tests__/RadioGroup.test.tsx
+++ b/src/components/RadioGroup/__tests__/RadioGroup.test.tsx
@@ -28,7 +28,7 @@ describe('RadioGroup', () => {
         );
         const component = screen.getByTestId(qaId);
 
-        expect(component).toHaveClass(`yc-radio-group_size_${size}`);
+        expect(component).toHaveClass(`g-radio-group_size_${size}`);
     });
 
     test('all children are disabled when disabled=true prop is given', () => {
@@ -193,7 +193,7 @@ describe('RadioGroup', () => {
             );
             const component = screen.getByTestId(qaId);
 
-            expect(component).toHaveClass(`yc-radio-group_direction_${direction}`);
+            expect(component).toHaveClass(`g-radio-group_direction_${direction}`);
         },
     );
 });
diff --git a/src/components/Select/Select.scss b/src/components/Select/Select.scss
index 36e19f7103..f9b8cae378 100644
--- a/src/components/Select/Select.scss
+++ b/src/components/Select/Select.scss
@@ -1,6 +1,6 @@
 @use '../variables';
 
-$block: '.#{variables.$ns-new}select';
+$block: '.#{variables.$ns}select';
 
 #{$block} {
     display: inline-block;
diff --git a/src/components/Select/__stories__/SelectShowcase.scss b/src/components/Select/__stories__/SelectShowcase.scss
index 708294e0b3..3def926499 100644
--- a/src/components/Select/__stories__/SelectShowcase.scss
+++ b/src/components/Select/__stories__/SelectShowcase.scss
@@ -1,7 +1,7 @@
 @use '../../variables';
 
 $block: '.#{variables.$ns}select-showcase';
-$blockSelectClear: '.#{variables.$ns-new}select-clear';
+$blockSelectClear: '.#{variables.$ns}select-clear';
 
 .select-width-50 {
     width: 50px;
@@ -58,7 +58,7 @@ $blockSelectClear: '.#{variables.$ns-new}select-clear';
         margin-block-start: 10px;
         border-radius: 12px;
 
-        .yc-list__item {
+        .g-list__item {
             margin: 4px;
             border-radius: 12px;
         }
diff --git a/src/components/Select/components/EmptyOptions/EmptyOptions.scss b/src/components/Select/components/EmptyOptions/EmptyOptions.scss
index f092c3bc34..6d3957631e 100644
--- a/src/components/Select/components/EmptyOptions/EmptyOptions.scss
+++ b/src/components/Select/components/EmptyOptions/EmptyOptions.scss
@@ -1,6 +1,6 @@
 @use '../../../variables';
 
-$block: '.#{variables.$ns-new}select-empty-placeholder';
+$block: '.#{variables.$ns}select-empty-placeholder';
 
 #{$block} {
     margin: 4px;
diff --git a/src/components/Select/components/EmptyOptions/EmptyOptions.tsx b/src/components/Select/components/EmptyOptions/EmptyOptions.tsx
index c3903b4e76..413ee6b14f 100644
--- a/src/components/Select/components/EmptyOptions/EmptyOptions.tsx
+++ b/src/components/Select/components/EmptyOptions/EmptyOptions.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {blockNew as block} from '../../../utils/cn';
+import {block} from '../../../utils/cn';
 import type {SelectProps} from '../../types';
 
 import './EmptyOptions.scss';
diff --git a/src/components/Select/components/SelectClear/SelectClear.scss b/src/components/Select/components/SelectClear/SelectClear.scss
index b19aec2dc0..3949b639ad 100644
--- a/src/components/Select/components/SelectClear/SelectClear.scss
+++ b/src/components/Select/components/SelectClear/SelectClear.scss
@@ -1,7 +1,7 @@
 @use '../../../../../styles/mixins';
 @use '../../../variables';
 
-$block: '.#{variables.$ns-new}select-clear';
+$block: '.#{variables.$ns}select-clear';
 
 #{$block} {
     @include mixins.button-reset();
diff --git a/src/components/Select/components/SelectControl/SelectControl.scss b/src/components/Select/components/SelectControl/SelectControl.scss
index f52e172758..0f9dd4955f 100644
--- a/src/components/Select/components/SelectControl/SelectControl.scss
+++ b/src/components/Select/components/SelectControl/SelectControl.scss
@@ -3,8 +3,8 @@
 @use '../../variables.scss' as select-css-variables;
 @use '../SelectClear/SelectClear';
 
-$block: '.#{variables.$ns-new}select-control';
-$blockButton: '.#{variables.$ns-new}select-control__button';
+$block: '.#{variables.$ns}select-control';
+$blockButton: '.#{variables.$ns}select-control__button';
 
 @mixin block_control($size: m) {
     @if $size == 's' {
diff --git a/src/components/Select/components/SelectFilter/SelectFilter.scss b/src/components/Select/components/SelectFilter/SelectFilter.scss
index de13c01e8b..8c9c819e63 100644
--- a/src/components/Select/components/SelectFilter/SelectFilter.scss
+++ b/src/components/Select/components/SelectFilter/SelectFilter.scss
@@ -1,6 +1,6 @@
 @use '../../../variables';
 
-$block: '.#{variables.$ns-new}select-filter';
+$block: '.#{variables.$ns}select-filter';
 
 #{$block} {
     // To prevent border blink when the focus is set frequently (in case of option click)
diff --git a/src/components/Select/components/SelectFilter/SelectFilter.tsx b/src/components/Select/components/SelectFilter/SelectFilter.tsx
index 8e772723a6..74e2beb99a 100644
--- a/src/components/Select/components/SelectFilter/SelectFilter.tsx
+++ b/src/components/Select/components/SelectFilter/SelectFilter.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {TextInput} from '../../../controls';
-import {blockNew as block} from '../../../utils/cn';
+import {block} from '../../../utils/cn';
 import type {SelectProps} from '../../types';
 import type {SelectFilterRef} from '../../types-misc';
 
diff --git a/src/components/Select/components/SelectList/GroupLabel.tsx b/src/components/Select/components/SelectList/GroupLabel.tsx
index acb0ed6c6a..b1464daaf5 100644
--- a/src/components/Select/components/SelectList/GroupLabel.tsx
+++ b/src/components/Select/components/SelectList/GroupLabel.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {blockNew as block} from '../../../utils/cn';
+import {block} from '../../../utils/cn';
 import type {GroupTitleItem} from '../../utils';
 
 const b = block('select-list');
diff --git a/src/components/Select/components/SelectList/OptionWrap.tsx b/src/components/Select/components/SelectList/OptionWrap.tsx
index 6f1cc56b7c..054aa99f8f 100644
--- a/src/components/Select/components/SelectList/OptionWrap.tsx
+++ b/src/components/Select/components/SelectList/OptionWrap.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import {Check} from '@gravity-ui/icons';
 
 import {Icon} from '../../../Icon';
-import {blockNew as block} from '../../../utils/cn';
+import {block} from '../../../utils/cn';
 import type {SelectOption, SelectProps} from '../../types';
 
 const b = block('select-list');
diff --git a/src/components/Select/components/SelectList/SelectList.scss b/src/components/Select/components/SelectList/SelectList.scss
index b3dd7c422f..6ebf05d2b0 100644
--- a/src/components/Select/components/SelectList/SelectList.scss
+++ b/src/components/Select/components/SelectList/SelectList.scss
@@ -2,7 +2,7 @@
 @use '../../../variables';
 @use '../../variables.scss' as select-css-variables;
 
-$block: '.#{variables.$ns-new}select-list';
+$block: '.#{variables.$ns}select-list';
 $popupBlock: '.#{variables.$ns}popup';
 $listBlock: '.#{variables.$ns}list';
 $xl-right-padding: '12px';
diff --git a/src/components/Select/components/SelectPopup/SelectPopup.scss b/src/components/Select/components/SelectPopup/SelectPopup.scss
index 1110a2cfcc..93e7f58e0c 100644
--- a/src/components/Select/components/SelectPopup/SelectPopup.scss
+++ b/src/components/Select/components/SelectPopup/SelectPopup.scss
@@ -1,6 +1,6 @@
 @use '../../../variables';
 
-$block: '.#{variables.$ns-new}select-popup';
+$block: '.#{variables.$ns}select-popup';
 
 #{$block} {
     display: flex;
diff --git a/src/components/Select/components/SelectPopup/SelectPopup.tsx b/src/components/Select/components/SelectPopup/SelectPopup.tsx
index ebfcfd3208..c8dc7aa888 100644
--- a/src/components/Select/components/SelectPopup/SelectPopup.tsx
+++ b/src/components/Select/components/SelectPopup/SelectPopup.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {Popup} from '../../../Popup';
 import {Sheet} from '../../../Sheet';
-import {blockNew} from '../../../utils/cn';
+import {block} from '../../../utils/cn';
 import {BORDER_WIDTH, SelectQa} from '../../constants';
 
 import {getModifiers} from './modifiers';
@@ -10,7 +10,7 @@ import type {SelectPopupProps} from './types';
 
 import './SelectPopup.scss';
 
-const b = blockNew('select-popup');
+const b = block('select-popup');
 
 export const SelectPopup = React.forwardRef<HTMLDivElement, SelectPopupProps>(
     (
diff --git a/src/components/Select/constants.ts b/src/components/Select/constants.ts
index d89cbcd066..7da7c3f704 100644
--- a/src/components/Select/constants.ts
+++ b/src/components/Select/constants.ts
@@ -1,4 +1,4 @@
-import {blockNew as block} from '../utils/cn';
+import {block} from '../utils/cn';
 
 import type {SelectSize} from './types';
 
diff --git a/src/components/Table/__tests__/Table.test.tsx b/src/components/Table/__tests__/Table.test.tsx
index 3a0f0bf490..2d644d7350 100644
--- a/src/components/Table/__tests__/Table.test.tsx
+++ b/src/components/Table/__tests__/Table.test.tsx
@@ -28,7 +28,7 @@ describe('Table', () => {
             const rows = within(tbody[1]).getAllByRole('row');
 
             rows.forEach((row) => {
-                expect(row).toHaveClass(`yc-table__row_vertical-align_${align}`);
+                expect(row).toHaveClass(`g-table__row_vertical-align_${align}`);
             });
         },
     );
@@ -56,7 +56,7 @@ describe('Table', () => {
         const cells = within(thead[0]).getAllByRole('columnheader');
 
         cells.forEach((cell) => {
-            expect(cell).toHaveClass(`yc-table__cell_edge-padding`);
+            expect(cell).toHaveClass(`g-table__cell_edge-padding`);
         });
     });
 
@@ -67,7 +67,7 @@ describe('Table', () => {
         const cells = within(thead[0]).getAllByRole('columnheader');
 
         cells.forEach((cell) => {
-            expect(cell).not.toHaveClass(`yc-table__cell_edge-padding`);
+            expect(cell).not.toHaveClass(`g-table__cell_edge-padding`);
         });
     });
 
@@ -83,7 +83,7 @@ describe('Table', () => {
         const tbody = within(table).getAllByRole('rowgroup');
         const rows = within(tbody[1]).getAllByRole('row');
 
-        const row = rows.filter((r) => r.className.includes('yc-table__row_disabled'));
+        const row = rows.filter((r) => r.className.includes('g-table__row_disabled'));
         expect(row.length).toBe(1);
     });
 
@@ -117,7 +117,7 @@ describe('Table', () => {
         render(<Table data={data} columns={columns} stickyHorizontalScroll={true} qa={qaId} />);
         const table = screen.getByTestId(qaId);
 
-        expect(table).toHaveClass('yc-table_with-sticky-scroll');
+        expect(table).toHaveClass('g-table_with-sticky-scroll');
     });
 
     test('call onRowClick', async () => {
diff --git a/src/components/Tabs/__tests__/Tabs.test.tsx b/src/components/Tabs/__tests__/Tabs.test.tsx
index c525e20c81..3cbdd91000 100644
--- a/src/components/Tabs/__tests__/Tabs.test.tsx
+++ b/src/components/Tabs/__tests__/Tabs.test.tsx
@@ -21,8 +21,8 @@ test('should render tabs by default', () => {
     const component = screen.getByRole('tablist');
 
     expect(component).toBeVisible();
-    expect(component).toHaveClass('yc-tabs_size_m');
-    expect(component).toHaveClass('yc-tabs_direction_horizontal');
+    expect(component).toHaveClass('g-tabs_size_m');
+    expect(component).toHaveClass('g-tabs_direction_horizontal');
 });
 
 test('should not render tabs if no items', () => {
@@ -38,7 +38,7 @@ test.each(new Array<TabsSize>('m', 'l', 'xl'))('should render with given "%s" si
     render(<Tabs items={[]} size={size} qa={qaId} />);
     const component = screen.getByTestId(qaId);
 
-    expect(component).toHaveClass(`yc-tabs_size_${size}`);
+    expect(component).toHaveClass(`g-tabs_size_${size}`);
 });
 
 test.each(new Array<TabsDirection>(TabsDirection.Horizontal, TabsDirection.Vertical))(
@@ -47,7 +47,7 @@ test.each(new Array<TabsDirection>(TabsDirection.Horizontal, TabsDirection.Verti
         render(<Tabs items={[]} direction={direction} qa={qaId} />);
         const component = screen.getByTestId(qaId);
 
-        expect(component).toHaveClass(`yc-tabs_direction_${direction}`);
+        expect(component).toHaveClass(`g-tabs_direction_${direction}`);
     },
 );
 
@@ -65,10 +65,10 @@ test('should not select tab if allow not selected', () => {
     const tabComponent1 = screen.getByTitle(tabTitle1);
     const tabComponent2 = screen.getByTitle(tabTitle2);
 
-    expect(tabComponent1).not.toHaveClass('yc-tabs__item_active');
+    expect(tabComponent1).not.toHaveClass('g-tabs__item_active');
     expect(tabComponent1).toHaveAttribute('aria-selected', 'false');
 
-    expect(tabComponent2).not.toHaveClass('yc-tabs__item_active');
+    expect(tabComponent2).not.toHaveClass('g-tabs__item_active');
     expect(tabComponent2).toHaveAttribute('aria-selected', 'false');
 });
 
@@ -77,10 +77,10 @@ test('should select first tab as active', () => {
     const tabComponent1 = screen.getByTitle(tabTitle1);
     const tabComponent2 = screen.getByTitle(tabTitle2);
 
-    expect(tabComponent1).toHaveClass('yc-tabs__item_active');
+    expect(tabComponent1).toHaveClass('g-tabs__item_active');
     expect(tabComponent1).toHaveAttribute('aria-selected', 'true');
 
-    expect(tabComponent2).not.toHaveClass('yc-tabs__item_active');
+    expect(tabComponent2).not.toHaveClass('g-tabs__item_active');
     expect(tabComponent2).toHaveAttribute('aria-selected', 'false');
 });
 
@@ -89,10 +89,10 @@ test('should passed active tab', () => {
     const tabComponent1 = screen.getByTitle(tabTitle1);
     const tabComponent2 = screen.getByTitle(tabTitle2);
 
-    expect(tabComponent1).not.toHaveClass('yc-tabs__item_active');
+    expect(tabComponent1).not.toHaveClass('g-tabs__item_active');
     expect(tabComponent1).toHaveAttribute('aria-selected', 'false');
 
-    expect(tabComponent2).toHaveClass('yc-tabs__item_active');
+    expect(tabComponent2).toHaveClass('g-tabs__item_active');
     expect(tabComponent2).toHaveAttribute('aria-selected', 'true');
 });
 
diff --git a/src/components/Tabs/__tests__/TabsItem.test.tsx b/src/components/Tabs/__tests__/TabsItem.test.tsx
index 4cea9ea221..a70bb25a29 100644
--- a/src/components/Tabs/__tests__/TabsItem.test.tsx
+++ b/src/components/Tabs/__tests__/TabsItem.test.tsx
@@ -14,7 +14,7 @@ test('should render tab item by default', () => {
     const component = screen.getByRole('tab');
 
     expect(component).toBeVisible();
-    expect(component).not.toHaveClass('yc-tabs__item_active');
+    expect(component).not.toHaveClass('g-tabs__item_active');
     expect(component).toHaveAttribute('aria-selected', 'false');
     expect(component).toHaveAttribute('aria-disabled', 'false');
 });
@@ -24,7 +24,7 @@ test('should render active tab item', () => {
     const component = screen.getByRole('tab');
 
     expect(component).toBeVisible();
-    expect(component).toHaveClass('yc-tabs__item_active');
+    expect(component).toHaveClass('g-tabs__item_active');
     expect(component).toHaveAttribute('aria-selected', 'true');
 });
 
@@ -72,7 +72,7 @@ test('should render id if title is empty', () => {
     const titleComponent = screen.getByText(tabId);
 
     expect(component).toContainElement(titleComponent);
-    expect(titleComponent).toHaveClass('yc-tabs__item-title');
+    expect(titleComponent).toHaveClass('g-tabs__item-title');
 });
 
 test('should render counter', () => {
@@ -84,7 +84,7 @@ test('should render counter', () => {
     const counterComponent = screen.getByText(counter);
 
     expect(counterComponent).toBeVisible();
-    expect(counterComponent).toHaveClass('yc-tabs__item-counter');
+    expect(counterComponent).toHaveClass('g-tabs__item-counter');
     expect(component).toContainElement(counterComponent);
 });
 
@@ -128,7 +128,7 @@ test('should render meta', () => {
     const metaComponent = screen.getByText(meta);
 
     expect(metaComponent).toBeVisible();
-    expect(metaComponent).toHaveClass('yc-tabs__item-meta');
+    expect(metaComponent).toHaveClass('g-tabs__item-meta');
     expect(component).toContainElement(metaComponent);
 });
 
diff --git a/src/components/Toaster/__stories__/ToasterShowcase.scss b/src/components/Toaster/__stories__/ToasterShowcase.scss
index 28f471c37f..106f8520a4 100644
--- a/src/components/Toaster/__stories__/ToasterShowcase.scss
+++ b/src/components/Toaster/__stories__/ToasterShowcase.scss
@@ -1,4 +1,4 @@
-.yc-toaster-story {
+.toaster-showcase {
     &__mobile-promotion {
         width: 450px;
         border: 2px solid #1a8dff;
diff --git a/src/components/Toaster/__stories__/ToasterShowcase.tsx b/src/components/Toaster/__stories__/ToasterShowcase.tsx
index a47a1872f9..730c1e4be1 100644
--- a/src/components/Toaster/__stories__/ToasterShowcase.tsx
+++ b/src/components/Toaster/__stories__/ToasterShowcase.tsx
@@ -8,11 +8,11 @@ import type {ToastAction, ToastProps} from '..';
 import {Button} from '../../Button';
 import type {ButtonView} from '../../Button';
 import {Icon} from '../../Icon';
-import {block} from '../../utils/cn';
+import {cn} from '../../utils/cn';
 
 import './ToasterShowcase.scss';
 
-const b = block('toaster-story');
+const b = cn('toaster-showcase');
 
 const CONTENT = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, atque!';
 
diff --git a/src/components/Toc/Toc.scss b/src/components/Toc/Toc.scss
index 7524110737..5854d41223 100644
--- a/src/components/Toc/Toc.scss
+++ b/src/components/Toc/Toc.scss
@@ -1,7 +1,7 @@
 @use '../variables';
 @use '../../../styles/mixins.scss';
 
-$block: '.#{variables.$ns-new}toc';
+$block: '.#{variables.$ns}toc';
 
 #{$block} {
     &__title {
diff --git a/src/components/Toc/Toc.tsx b/src/components/Toc/Toc.tsx
index eff6f10b93..c7ff423799 100644
--- a/src/components/Toc/Toc.tsx
+++ b/src/components/Toc/Toc.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 
 import type {QAProps} from '../types';
-import {blockNew} from '../utils/cn';
+import {block} from '../utils/cn';
 
 import {TocItem} from './TocItem/TocItem';
 import type {TocItem as TocItemType} from './types';
 
 import './Toc.scss';
 
-const b = blockNew('toc');
+const b = block('toc');
 
 export interface TocProps extends QAProps {
     className?: string;
diff --git a/src/components/Toc/TocItem/TocItem.scss b/src/components/Toc/TocItem/TocItem.scss
index 7de10e0d54..02460ba4f7 100644
--- a/src/components/Toc/TocItem/TocItem.scss
+++ b/src/components/Toc/TocItem/TocItem.scss
@@ -1,6 +1,6 @@
 @use '../../variables';
 
-$block: '.#{variables.$ns-new}toc-item';
+$block: '.#{variables.$ns}toc-item';
 
 #{$block} {
     $class: &;
diff --git a/src/components/Toc/TocItem/TocItem.tsx b/src/components/Toc/TocItem/TocItem.tsx
index d4765075ed..e026b38947 100644
--- a/src/components/Toc/TocItem/TocItem.tsx
+++ b/src/components/Toc/TocItem/TocItem.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 
 import {useActionHandlers} from '../../../hooks';
-import {blockNew} from '../../utils/cn';
+import {block} from '../../utils/cn';
 import type {TocItem as TocItemType} from '../types';
 
 import './TocItem.scss';
 
-const b = blockNew('toc-item');
+const b = block('toc-item');
 
 export interface TocItemProps extends TocItemType {
     childItem?: boolean;
diff --git a/src/components/Toc/__stories__/Toc.stories.scss b/src/components/Toc/__stories__/Toc.stories.scss
index f6e5d0a109..13d9231b75 100644
--- a/src/components/Toc/__stories__/Toc.stories.scss
+++ b/src/components/Toc/__stories__/Toc.stories.scss
@@ -1,6 +1,6 @@
 @use '../../variables';
 
-$block: '.#{variables.$ns-new}toc-stories';
+$block: '.#{variables.$ns}toc-stories';
 
 #{$block} {
     $class: &;
diff --git a/src/components/Toc/__stories__/Toc.stories.tsx b/src/components/Toc/__stories__/Toc.stories.tsx
index 24b1d43501..a30cf42633 100644
--- a/src/components/Toc/__stories__/Toc.stories.tsx
+++ b/src/components/Toc/__stories__/Toc.stories.tsx
@@ -2,12 +2,12 @@ import React from 'react';
 
 import type {Meta, StoryFn} from '@storybook/react';
 
-import {blockNew} from '../../utils/cn';
+import {block} from '../../utils/cn';
 import {Toc, TocProps} from '../Toc';
 
 import './Toc.stories.scss';
 
-const b = blockNew('toc-stories');
+const b = block('toc-stories');
 
 export default {
     title: 'Components/Data Display/Toc',
diff --git a/src/components/User/User.scss b/src/components/User/User.scss
index 8adbe1ebad..a611a536d3 100644
--- a/src/components/User/User.scss
+++ b/src/components/User/User.scss
@@ -1,7 +1,7 @@
 @use '../../../styles/mixins';
 @use '../variables';
 
-$block: '.#{variables.$ns-new}user';
+$block: '.#{variables.$ns}user';
 
 #{$block} {
     display: flex;
diff --git a/src/components/User/User.tsx b/src/components/User/User.tsx
index 9f12992282..fd1939fbdf 100644
--- a/src/components/User/User.tsx
+++ b/src/components/User/User.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 
 import {Avatar} from '../Avatar';
-import {blockNew} from '../utils/cn';
+import {block} from '../utils/cn';
 
 import type {UserProps} from './types';
 
 import './User.scss';
 
-const b = blockNew('user');
+const b = block('user');
 
 export const User = React.forwardRef<HTMLDivElement, UserProps>(
     (
diff --git a/src/components/controls/TextArea/TextArea.scss b/src/components/controls/TextArea/TextArea.scss
index aba715ad1c..2808e6f081 100644
--- a/src/components/controls/TextArea/TextArea.scss
+++ b/src/components/controls/TextArea/TextArea.scss
@@ -2,7 +2,7 @@
 @use '../../variables';
 @use '../mixins.scss' as control-mixins;
 
-$block: '.#{variables.$ns-new}text-area';
+$block: '.#{variables.$ns}text-area';
 
 #{$block} {
     display: inline-block;
diff --git a/src/components/controls/TextArea/TextArea.tsx b/src/components/controls/TextArea/TextArea.tsx
index e54dbfeab2..0444c58659 100644
--- a/src/components/controls/TextArea/TextArea.tsx
+++ b/src/components/controls/TextArea/TextArea.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {useControlledState, useForkRef, useUniqId} from '../../../hooks';
-import {blockNew} from '../../utils/cn';
+import {block} from '../../utils/cn';
 import {ClearButton, mapTextInputSizeToButtonSize} from '../common';
 import {OuterAdditionalContent} from '../common/OuterAdditionalContent/OuterAdditionalContent';
 import type {
@@ -16,7 +16,7 @@ import {TextAreaControl} from './TextAreaControl';
 
 import './TextArea.scss';
 
-const b = blockNew('text-area');
+const b = block('text-area');
 
 export type TextAreaProps = BaseInputControlProps<HTMLTextAreaElement> & {
     /** The control's html attributes */
diff --git a/src/components/controls/TextArea/TextAreaControl.tsx b/src/components/controls/TextArea/TextAreaControl.tsx
index 1f8c6c80bf..866e5f89a7 100644
--- a/src/components/controls/TextArea/TextAreaControl.tsx
+++ b/src/components/controls/TextArea/TextAreaControl.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {useForkRef} from '../../../hooks';
-import {blockNew} from '../../utils/cn';
+import {block} from '../../utils/cn';
 
 import type {TextAreaProps} from './TextArea';
 
@@ -10,7 +10,7 @@ type Props = Omit<TextAreaProps, 'autoComplete' | 'onChange'> & {
     autoComplete?: React.TextareaHTMLAttributes<HTMLTextAreaElement>['autoComplete'];
 };
 
-const b = blockNew('text-area');
+const b = block('text-area');
 
 const calculateLinesByScrollHeight = (args: {
     height: number;
diff --git a/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx b/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
index b09d635883..0088326055 100644
--- a/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
+++ b/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
@@ -30,10 +30,9 @@ describe('TextInput input', () => {
             });
 
             test('do not show error without error prop', () => {
-                const {container} = render(<TextInput />);
+                render(<TextInput />);
 
-                // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-                expect(container.querySelector('.yc-text-input__error')).not.toBeInTheDocument();
+                expect(screen.queryByTestId('control-error-message-qa')).not.toBeInTheDocument();
             });
 
             test('check clear button visibility with hasClear prop', async () => {
@@ -184,14 +183,13 @@ describe('TextInput input', () => {
     describe('with label prop', () => {
         describe('basic', () => {
             test('render input with label', () => {
-                const {container} = render(<TextInput label="Label:" />);
+                render(<TextInput label="Label:" />);
 
-                // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-                const label = container.querySelector('.yc-text-input__label');
+                const label = screen.getByText('Label:');
 
                 expect(label).toBeInTheDocument();
-                expect(label?.tagName.toLowerCase()).toBe('label');
-                expect(screen.getByText('Label:')).toBeVisible();
+                expect(label.tagName.toLowerCase()).toBe('label');
+                expect(label).toBeVisible();
             });
 
             test('render described input with error message and note', () => {
@@ -229,14 +227,14 @@ describe('TextInput input', () => {
             });
 
             test('render no autocomplete attribute when no autoComplete prop, but id prop set', () => {
-                render(<TextInput id="yc-id" label="Label:" />);
+                render(<TextInput id="id" label="Label:" />);
                 const input = screen.getByRole('textbox');
 
                 expect(input.getAttribute('autocomplete')).toBeNull();
             });
 
             test('render no autocomplete attribute when no autoComplete prop, but name prop set', () => {
-                render(<TextInput name="yc-name" label="Label:" />);
+                render(<TextInput name="name" label="Label:" />);
                 const input = screen.getByRole('textbox');
 
                 expect(input.getAttribute('autocomplete')).toBeNull();
diff --git a/src/components/controls/common/ClearButton/ClearButton.scss b/src/components/controls/common/ClearButton/ClearButton.scss
index bbe59d82e1..6af904da7c 100644
--- a/src/components/controls/common/ClearButton/ClearButton.scss
+++ b/src/components/controls/common/ClearButton/ClearButton.scss
@@ -1,6 +1,6 @@
 @use '../../../variables';
 
-$block: '.#{variables.$ns-new}clear-button';
+$block: '.#{variables.$ns}clear-button';
 
 #{$block} {
     --g-button-text-color: var(--g-color-text-hint);
diff --git a/src/components/controls/common/ClearButton/ClearButton.tsx b/src/components/controls/common/ClearButton/ClearButton.tsx
index 1d37db3c19..39d05c4252 100644
--- a/src/components/controls/common/ClearButton/ClearButton.tsx
+++ b/src/components/controls/common/ClearButton/ClearButton.tsx
@@ -4,14 +4,14 @@ import {Xmark} from '@gravity-ui/icons';
 
 import {Button, ButtonSize} from '../../../Button';
 import {Icon} from '../../../Icon';
-import {blockNew} from '../../../utils/cn';
+import {block} from '../../../utils/cn';
 import type {InputControlSize} from '../../types';
 
 import i18n from './i18n';
 
 import './ClearButton.scss';
 
-const b = blockNew('clear-button');
+const b = block('clear-button');
 const ICON_SIZE = 16;
 
 type Props = {
diff --git a/src/components/controls/common/ClearButton/i18n/index.ts b/src/components/controls/common/ClearButton/i18n/index.ts
index c7c8649230..336741bc5d 100644
--- a/src/components/controls/common/ClearButton/i18n/index.ts
+++ b/src/components/controls/common/ClearButton/i18n/index.ts
@@ -1,7 +1,7 @@
 import {addComponentKeysets} from '../../../../utils/addComponentKeysets';
-import {NAMESPACE_NEW} from '../../../../utils/cn';
+import {NAMESPACE} from '../../../../utils/cn';
 
 import en from './en.json';
 import ru from './ru.json';
 
-export default addComponentKeysets({en, ru}, `${NAMESPACE_NEW}clear-button`);
+export default addComponentKeysets({en, ru}, `${NAMESPACE}clear-button`);
diff --git a/src/components/layout/spacing/spacing.test.tsx b/src/components/layout/spacing/spacing.test.tsx
index 83ffef7a5f..d656c61732 100644
--- a/src/components/layout/spacing/spacing.test.tsx
+++ b/src/components/layout/spacing/spacing.test.tsx
@@ -3,9 +3,9 @@ import type {SpacingProps} from './spacing';
 
 describe('spacing utility', () => {
     test.each<[SpacingProps, string]>([
-        [{mr: 1, px: '0.5'}, 'yc-s__mr_1 yc-s__px_half'],
-        [{mr: '2'}, 'yc-s__mr_2'],
-        [{mr: 0, py: 0.5, p: 2}, 'yc-s__mr_0 yc-s__py_half yc-s__p_2'],
+        [{mr: 1, px: '0.5'}, 'g-s__mr_1 g-s__px_half'],
+        [{mr: '2'}, 'g-s__mr_2'],
+        [{mr: 0, py: 0.5, p: 2}, 'g-s__mr_0 g-s__py_half g-s__p_2'],
     ])('should return expected results than called with %s', (args, result) => {
         expect(sp(args)).toEqual(result);
     });
diff --git a/src/components/theme/ThemeProvider.tsx b/src/components/theme/ThemeProvider.tsx
index e8c276199a..119fb11abc 100644
--- a/src/components/theme/ThemeProvider.tsx
+++ b/src/components/theme/ThemeProvider.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {block, blockNew} from '../utils/cn';
+import {block} from '../utils/cn';
 
 import {ThemeContext} from './ThemeContext';
 import {ThemeSettingsContext} from './ThemeSettingsContext';
@@ -17,7 +17,6 @@ import type {Direction, RealTheme, Theme, ThemeContextProps} from './types';
 import {useSystemTheme} from './useSystemTheme';
 
 const b = block(ROOT_CLASS_NAME);
-const bNew = blockNew(ROOT_CLASS_NAME);
 
 export interface ThemeProviderProps extends React.PropsWithChildren<{}> {
     theme?: Theme;
@@ -88,12 +87,12 @@ export function ThemeProvider({
             <ThemeSettingsContext.Provider value={themeSettingsContext}>
                 {scoped ? (
                     <div
-                        className={bNew(
+                        className={b(
                             {
                                 theme: isNeedToSetTheme && themeValue,
                                 'native-scrollbar': nativeScrollbar !== false,
                             },
-                            [b({theme: isNeedToSetTheme && themeValue}), rootClassName],
+                            rootClassName,
                         )}
                         dir={
                             hasParentProvider && direction === parentDirection
diff --git a/src/components/theme/dom-helpers.ts b/src/components/theme/dom-helpers.ts
index ffe319697b..7ae2693aac 100644
--- a/src/components/theme/dom-helpers.ts
+++ b/src/components/theme/dom-helpers.ts
@@ -1,12 +1,10 @@
-import {block, blockNew, modsClassName} from '../utils/cn';
+import {block, modsClassName} from '../utils/cn';
 
 import {DEFAULT_DIRECTION, ROOT_CLASS_NAME} from './constants';
 import type {Direction, RealTheme} from './types';
 
 const b = block(ROOT_CLASS_NAME);
-const bNew = blockNew(ROOT_CLASS_NAME);
 const rootClassName = b();
-const rootNewClassName = bNew();
 
 export function updateBodyClassName({
     theme,
@@ -23,10 +21,6 @@ export function updateBodyClassName({
         bodyEl.classList.add(rootClassName);
     }
 
-    if (!bodyEl.classList.contains(rootNewClassName)) {
-        bodyEl.classList.add(rootNewClassName);
-    }
-
     if (className) {
         const parsedCustomRootClassNames = className.split(' ');
         parsedCustomRootClassNames.forEach((cls) => {
@@ -40,13 +34,8 @@ export function updateBodyClassName({
         if (cls.startsWith(modsClassName(b({theme: true})))) {
             bodyEl.classList.remove(cls);
         }
-
-        if (cls.startsWith(modsClassName(bNew({theme: true})))) {
-            bodyEl.classList.remove(cls);
-        }
     });
     bodyEl.classList.add(modsClassName(b({theme})));
-    bodyEl.classList.add(modsClassName(bNew({theme})));
 
     const modifiers = {
         'native-scrollbar': nativeScrollbar,
@@ -54,7 +43,6 @@ export function updateBodyClassName({
 
     for (const [key, value] of Object.entries(modifiers)) {
         bodyEl.classList.toggle(modsClassName(b({[key]: true})), value);
-        bodyEl.classList.toggle(modsClassName(bNew({[key]: true})), value);
     }
 }
 
diff --git a/src/components/utils/cn.ts b/src/components/utils/cn.ts
index 4bf0161172..c3d609c2b7 100644
--- a/src/components/utils/cn.ts
+++ b/src/components/utils/cn.ts
@@ -2,12 +2,10 @@ import {withNaming} from '@bem-react/classname';
 
 export type CnMods = Record<string, string | boolean | undefined>;
 
-export const NAMESPACE = 'yc-';
-export const NAMESPACE_NEW = 'g-';
+export const NAMESPACE = 'g-';
 
 export const cn = withNaming({e: '__', m: '_'});
 export const block = withNaming({n: NAMESPACE, e: '__', m: '_'});
-export const blockNew = withNaming({n: NAMESPACE_NEW, e: '__', m: '_'});
 
 export type CnBlock = ReturnType<typeof cn>;
 
diff --git a/src/components/variables.scss b/src/components/variables.scss
index 36bc0873ba..8ebea2ebdb 100644
--- a/src/components/variables.scss
+++ b/src/components/variables.scss
@@ -1,8 +1,9 @@
-$ns: 'yc-';
-$ns-new: 'g-';
-$root: '.#{$ns}root';
+$ns: 'g-';
+
+$xs-height: 20px;
 $s-height: 24px;
 $m-height: 28px;
 $l-height: 36px;
 $xl-height: 44px;
+
 $modal-default-margin: 20px;
diff --git a/src/demo/DocsDecorator/DocsDecorator.scss b/src/demo/DocsDecorator/DocsDecorator.scss
index 2d79d72d16..511832ee15 100644
--- a/src/demo/DocsDecorator/DocsDecorator.scss
+++ b/src/demo/DocsDecorator/DocsDecorator.scss
@@ -9,8 +9,8 @@ $root: '.docs-decorator';
 
 #{$root}#{$root}#{$root}#{$root}#{$root} {
     p,
-    li:not([class*='yc-']):not([class*='g-']),
-    a:not([class*='yc-']):not([class*='g-']) {
+    li:not([class*='g-']),
+    a:not([class*='g-']) {
         @include mixins.text-body-2;
     }
 
@@ -23,8 +23,8 @@ $root: '.docs-decorator';
     }
 
     p,
-    ul:not([class*='yc-']):not([class*='g-']),
-    ol:not([class*='yc-']):not([class*='g-']) {
+    ul:not([class*='g-']),
+    ol:not([class*='g-']) {
         margin: $offset-xs 0;
 
         & + p,
@@ -34,12 +34,12 @@ $root: '.docs-decorator';
         }
     }
 
-    li + li:not([class*='yc-']):not([class*='g-']) {
+    li + li:not([class*='g-']) {
         margin-block-start: $offset-xs;
     }
 
-    ul:not([class*='yc-']):not([class*='g-']),
-    ol:not([class*='yc-']):not([class*='g-']) {
+    ul:not([class*='g-']),
+    ol:not([class*='g-']) {
         padding-inline-start: $offset-m;
     }
 
@@ -63,7 +63,7 @@ $root: '.docs-decorator';
         margin-block: $offset-l $offset-m;
     }
 
-    a:not([class*='yc-']):not([class*='g-']) {
+    a:not([class*='g-']) {
         text-decoration: none;
         touch-action: manipulation;
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -77,7 +77,7 @@ $root: '.docs-decorator';
     }
 
     p code,
-    li:not([class*='yc-']):not([class*='g-']) code {
+    li:not([class*='g-']) code {
         @include mixins.text-code-inline-2;
         line-height: 1;
         padding: 1px 4px;
diff --git a/src/hooks/useUniqId/useUniqId.ts b/src/hooks/useUniqId/useUniqId.ts
index 6bffc9efb9..e9ab5ff660 100644
--- a/src/hooks/useUniqId/useUniqId.ts
+++ b/src/hooks/useUniqId/useUniqId.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {NAMESPACE_NEW} from '../../components/utils/cn';
+import {NAMESPACE} from '../../components/utils/cn';
 import {getUniqId} from '../../components/utils/common';
 
 export type UseUniqIdResult = string;
@@ -14,7 +14,7 @@ function useUniqIdFallback() {
 }
 
 function useIdNative() {
-    return `${NAMESPACE_NEW}${React.useId()}`;
+    return `${NAMESPACE}${React.useId()}`;
 }
 
 export const useUniqId: () => UseUniqIdResult =
diff --git a/styles/mixins.scss b/styles/mixins.scss
index afdb38f0dc..aaa49761d1 100644
--- a/styles/mixins.scss
+++ b/styles/mixins.scss
@@ -304,5 +304,5 @@
     background-clip: padding-box;
 
     // stylelint-disable-next-line no-unknown-animations
-    animation: yc-loading-animation 0.5s linear infinite;
+    animation: g-loading-animation 0.5s linear infinite;
 }
diff --git a/styles/styles.scss b/styles/styles.scss
index 94af90791a..0c349db210 100644
--- a/styles/styles.scss
+++ b/styles/styles.scss
@@ -55,7 +55,7 @@
     scrollbar-color: var(--g-color-scroll-handle) var(--g-color-scroll-track);
 }
 
-@keyframes yc-loading-animation {
+@keyframes g-loading-animation {
     from {
         background-position: -12px 0;
     }