diff --git a/cypress/snapshots/ui/components/Confirm/Confirm.component-test.tsx/Confirm -- placement bottom + stretch.snap.png b/cypress/snapshots/ui/components/Confirm/Confirm.component-test.tsx/Confirm -- _placement -- bottom + stretch.snap.png
similarity index 100%
rename from cypress/snapshots/ui/components/Confirm/Confirm.component-test.tsx/Confirm -- placement bottom + stretch.snap.png
rename to cypress/snapshots/ui/components/Confirm/Confirm.component-test.tsx/Confirm -- _placement -- bottom + stretch.snap.png
diff --git a/cypress/snapshots/ui/components/Confirm/Confirm.component-test.tsx/Confirm -- placement bottom + left.snap.png b/cypress/snapshots/ui/components/Confirm/Confirm.component-test.tsx/Confirm -- _placement -- bottom-left.snap.png
similarity index 100%
rename from cypress/snapshots/ui/components/Confirm/Confirm.component-test.tsx/Confirm -- placement bottom + left.snap.png
rename to cypress/snapshots/ui/components/Confirm/Confirm.component-test.tsx/Confirm -- _placement -- bottom-left.snap.png
diff --git a/cypress/snapshots/ui/components/Confirm/Confirm.component-test.tsx/Confirm -- placement center.snap.png b/cypress/snapshots/ui/components/Confirm/Confirm.component-test.tsx/Confirm -- _placement -- center.snap.png
similarity index 100%
rename from cypress/snapshots/ui/components/Confirm/Confirm.component-test.tsx/Confirm -- placement center.snap.png
rename to cypress/snapshots/ui/components/Confirm/Confirm.component-test.tsx/Confirm -- _placement -- center.snap.png
diff --git a/cypress/snapshots/ui/components/Confirm/Confirm.component-test.tsx/Confirm -- placement top-right + offset.snap.png b/cypress/snapshots/ui/components/Confirm/Confirm.component-test.tsx/Confirm -- _placement -- top-right + offset.snap.png
similarity index 100%
rename from cypress/snapshots/ui/components/Confirm/Confirm.component-test.tsx/Confirm -- placement top-right + offset.snap.png
rename to cypress/snapshots/ui/components/Confirm/Confirm.component-test.tsx/Confirm -- _placement -- top-right + offset.snap.png
diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md
index 5b6dfecd61..d058441c6b 100644
--- a/packages/plasma-b2c/api/plasma-b2c.api.md
+++ b/packages/plasma-b2c/api/plasma-b2c.api.md
@@ -150,6 +150,7 @@ import { MediaQueryFunction } from '@salutejs/plasma-hope';
 import { Modal } from '@salutejs/plasma-hope';
 import { ModalAnimationInfo } from '@salutejs/plasma-hope';
 import { ModalBase } from '@salutejs/plasma-hope';
+import { modalBaseOverlayClass } from '@salutejs/plasma-hope';
 import { ModalBaseProps } from '@salutejs/plasma-hope';
 import { ModalBaseRootProps } from '@salutejs/plasma-hope';
 import { ModalOverlay } from '@salutejs/plasma-hope';
@@ -183,6 +184,7 @@ import { PopupBase } from '@salutejs/plasma-hope';
 import { PopupBasePlacement } from '@salutejs/plasma-hope';
 import { PopupBaseProps } from '@salutejs/plasma-hope';
 import { PopupBaseProvider } from '@salutejs/plasma-hope';
+import { popupBaseRootClass } from '@salutejs/plasma-hope';
 import { PopupContextType } from '@salutejs/plasma-hope';
 import { PopupInfo } from '@salutejs/plasma-hope';
 import { PopupProps } from '@salutejs/plasma-hope';
@@ -614,6 +616,8 @@ export { ModalAnimationInfo }
 
 export { ModalBase }
 
+export { modalBaseOverlayClass }
+
 export { ModalBaseProps }
 
 export { ModalBaseRootProps }
@@ -683,6 +687,8 @@ export { PopupBaseProps }
 
 export { PopupBaseProvider }
 
+export { popupBaseRootClass }
+
 export { PopupContextType }
 
 export { PopupInfo }
diff --git a/packages/plasma-b2c/src/components/ModalBase/ModalBase.stories.tsx b/packages/plasma-b2c/src/components/ModalBase/ModalBase.stories.tsx
index 6cc0c5cbab..1ead73ccee 100644
--- a/packages/plasma-b2c/src/components/ModalBase/ModalBase.stories.tsx
+++ b/packages/plasma-b2c/src/components/ModalBase/ModalBase.stories.tsx
@@ -6,9 +6,9 @@ import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
 
 import { SSRProvider } from '../SSRProvider';
 import { Button } from '../Button';
-import { PopupBaseProvider } from '../PopupBase';
+import { PopupBaseProvider, popupBaseRootClass } from '../PopupBase';
 
-import { ModalBase, useModalAnimation } from '.';
+import { ModalBase, modalBaseOverlayClass, useModalAnimation } from '.';
 
 export default {
     title: 'Controls/ModalBase',
@@ -65,8 +65,7 @@ const Content = styled.div`
 `;
 
 const StyledModal = styled(ModalBase)`
-    & > .popup-base-root,
-    .modal-base-overlay {
+    & > .${popupBaseRootClass}, .${modalBaseOverlayClass} {
         animation: ${({ theme, withAnimation, animationInfo }) =>
             /* eslint-disable-next-line no-nested-ternary */
             theme.lowPerformance || !withAnimation
diff --git a/packages/plasma-b2c/src/components/ModalBase/index.ts b/packages/plasma-b2c/src/components/ModalBase/index.ts
index 8832d24af0..6000bc2577 100644
--- a/packages/plasma-b2c/src/components/ModalBase/index.ts
+++ b/packages/plasma-b2c/src/components/ModalBase/index.ts
@@ -1,6 +1,6 @@
 export { ModalBase } from '@salutejs/plasma-hope';
 export { useModal, useModalAnimation } from '@salutejs/plasma-hope';
-export { ModalOverlay } from '@salutejs/plasma-hope';
+export { ModalOverlay, modalBaseOverlayClass } from '@salutejs/plasma-hope';
 
 export type {
     ModalBaseProps,
diff --git a/packages/plasma-b2c/src/components/PopupBase/PopupBase.stories.tsx b/packages/plasma-b2c/src/components/PopupBase/PopupBase.stories.tsx
index e8a002a5c1..2774cfbeb6 100644
--- a/packages/plasma-b2c/src/components/PopupBase/PopupBase.stories.tsx
+++ b/packages/plasma-b2c/src/components/PopupBase/PopupBase.stories.tsx
@@ -7,7 +7,7 @@ import { surfaceSolid03, surfaceSolid02 } from '@salutejs/plasma-tokens-web';
 import { SSRProvider } from '../SSRProvider';
 import { Button } from '../Button';
 
-import { PopupBase, PopupBaseProvider, usePopupAnimation } from '.';
+import { PopupBase, PopupBaseProvider, popupBaseRootClass, usePopupAnimation } from '.';
 
 export default {
     title: 'Controls/PopupBase',
@@ -65,7 +65,7 @@ const Content = styled.div`
 `;
 
 const StyledPopupAnimation = styled(PopupBase)`
-    & > .popup-base-root {
+    & > .${popupBaseRootClass} {
         /* stylelint-disable */
         animation: ${({ theme, withAnimation, animationInfo }) =>
             /* eslint-disable-next-line no-nested-ternary */
@@ -98,7 +98,7 @@ const StyledPopupAnimation = styled(PopupBase)`
 `;
 
 const StyledPopupTransition = styled(PopupBase)`
-    & > .popup-base-root {
+    & > .${popupBaseRootClass} {
         ${({ animationInfo }) =>
             animationInfo.endTransition
                 ? css`
diff --git a/packages/plasma-b2c/src/components/PopupBase/index.ts b/packages/plasma-b2c/src/components/PopupBase/index.ts
index 9899765dd7..ce1e980914 100644
--- a/packages/plasma-b2c/src/components/PopupBase/index.ts
+++ b/packages/plasma-b2c/src/components/PopupBase/index.ts
@@ -1,5 +1,5 @@
 export { PopupBaseProvider, usePopupBaseContext } from '@salutejs/plasma-hope';
-export { PopupBase } from '@salutejs/plasma-hope';
+export { PopupBase, popupBaseRootClass } from '@salutejs/plasma-hope';
 export { usePopup, usePopupAnimation } from '@salutejs/plasma-hope';
 
 export type {
diff --git a/packages/plasma-core/api/plasma-core.api.md b/packages/plasma-core/api/plasma-core.api.md
index c0b59ab250..cee097fb7b 100644
--- a/packages/plasma-core/api/plasma-core.api.md
+++ b/packages/plasma-core/api/plasma-core.api.md
@@ -757,12 +757,14 @@ export interface MaxLinesProps {
 }
 
 // @public (undocumented)
-export interface ModalAnimationInfo extends PopupAnimationInfo {
-}
+export type ModalAnimationInfo = PopupAnimationInfo;
 
 // @public
 export const ModalBase: FC<ModalBaseProps>;
 
+// @public (undocumented)
+export const modalBaseOverlayClass = "modal-base-overlay";
+
 // @public (undocumented)
 export interface ModalBaseProps extends PopupBaseProps {
     closeOnEsc?: boolean;
@@ -776,15 +778,13 @@ export interface ModalBaseProps extends PopupBaseProps {
 }
 
 // @public (undocumented)
-export interface ModalBaseRootProps extends PopupRootProps, Pick<ModalBaseProps, 'initialFocusRef' | 'focusAfterRef' | 'onClose'> {
-}
+export type ModalBaseRootProps = PopupRootProps & Pick<ModalBaseProps, 'initialFocusRef' | 'focusAfterRef' | 'onClose'>;
 
 // @public
 export const ModalOverlay: FC<ModalOverlayProps>;
 
 // @public (undocumented)
-export interface ModalOverlayProps extends Pick<PopupRootProps, 'id' | 'animationInfo' | 'zIndex'>, Pick<ModalBaseProps, 'withBlur' | 'closeOnOverlayClick' | 'onOverlayClick' | 'onClose'> {
-}
+export type ModalOverlayProps = Pick<PopupRootProps, 'id' | 'animationInfo' | 'zIndex'> & Pick<ModalBaseProps, 'withBlur' | 'closeOnOverlayClick' | 'onOverlayClick' | 'onClose'>;
 
 // @public (undocumented)
 export const monthLongName: (val: number) => string;
@@ -897,6 +897,9 @@ export const PopupBaseProvider: React_2.FC<{
 // @public
 export const PopupBaseRoot: React_2.ForwardRefExoticComponent<PopupRootProps & React_2.RefAttributes<HTMLDivElement>>;
 
+// @public (undocumented)
+export const popupBaseRootClass = "popup-base-root";
+
 // @public (undocumented)
 export interface PopupContextType {
     // (undocumented)
@@ -1361,15 +1364,14 @@ export const useForkRef: UseForkRefHook;
 export const useIsomorphicLayoutEffect: typeof useEffect;
 
 // @public (undocumented)
-export const useModal: ({ id, popupInfo, closeOnEsc, onEscKeyDown, onClose }: UseModalArgs) => {
+export const useModal: ({ id, popupInfo, onEscKeyDown, onClose, closeOnEsc }: UseModalArgs) => {
     modalInfo: ModalInfo;
 };
 
 // Warning: (ae-forgotten-export) The symbol "UsePopupArgs" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export interface UseModalArgs extends Pick<UsePopupArgs, 'id' | 'popupInfo'>, Pick<ModalBaseProps, 'closeOnEsc' | 'onEscKeyDown' | 'onClose'> {
-}
+export type UseModalArgs = Pick<UsePopupArgs, 'id' | 'popupInfo'> & Pick<ModalBaseProps, 'closeOnEsc' | 'onEscKeyDown' | 'onClose'>;
 
 // @public (undocumented)
 export const usePaginationDots: ({ items, index, visibleItems }: SmartPaginationDotsProps) => {
diff --git a/packages/plasma-core/src/components/ModalBase/ModalBaseContext.tsx b/packages/plasma-core/src/components/ModalBase/ModalBaseContext.tsx
index 57c9c5bd14..bbf631b1c6 100644
--- a/packages/plasma-core/src/components/ModalBase/ModalBaseContext.tsx
+++ b/packages/plasma-core/src/components/ModalBase/ModalBaseContext.tsx
@@ -10,22 +10,22 @@ export interface ModalInfo extends PopupInfo {
 /**
  * Взаимодействие с модальными оконами.
  */
-const getLastModal = (items: ModalInfo[]) => {
-    const modals = items.filter((item: ModalInfo) => item?.info?.isModal);
-    const lastModal = modals && (modals[modals.length - 1] as ModalInfo);
-    return lastModal;
-};
-
-const getFirstModal = (items: ModalInfo[]) => {
-    const modals = items.filter((item: ModalInfo) => item?.info?.isModal);
-    const firstModal = modals && (modals[0] as ModalInfo);
-    return firstModal;
+const getModals = (items: ModalInfo[]) => {
+    return items.filter((item: ModalInfo) => item?.info?.isModal);
 };
 
 export const getIdLastModal = (items: ModalInfo[]) => {
-    return getLastModal(items)?.id;
+    const modals = getModals(items);
+    if (!modals.length) {
+        return;
+    }
+    return modals[modals.length - 1].id;
 };
 
 export const getIdFirstModal = (items: ModalInfo[]) => {
-    return getFirstModal(items)?.id;
+    const modals = getModals(items);
+    if (!modals.length) {
+        return;
+    }
+    return modals[0].id;
 };
diff --git a/packages/plasma-core/src/components/ModalBase/ModalOverlay.tsx b/packages/plasma-core/src/components/ModalBase/ModalOverlay.tsx
index 27fa568a19..84a21a15c1 100644
--- a/packages/plasma-core/src/components/ModalBase/ModalOverlay.tsx
+++ b/packages/plasma-core/src/components/ModalBase/ModalOverlay.tsx
@@ -7,6 +7,11 @@ import { usePopupBaseContext } from '../PopupBase';
 import { getIdFirstModal, getIdLastModal } from './ModalBaseContext';
 import { ModalOverlayProps } from './types';
 
+/*
+ * Класс компонента ModalBaseOverlay: `modal-base-overlay`
+ */
+export const modalBaseOverlayClass = 'modal-base-overlay';
+
 // TODO: новый отдельный оверлей #778
 export const Overlay = styled.div<{
     transparent?: boolean;
@@ -76,7 +81,7 @@ export const ModalOverlay: FC<ModalOverlayProps> = ({
 
     return (
         <Overlay
-            className="modal-base-overlay"
+            className={modalBaseOverlayClass}
             transparent={getIdLastModal(popupController.items) !== id}
             clickable={closeOnOverlayClick}
             endAnimation={getIdFirstModal(popupController.items) === id && animationInfo?.endAnimation}
diff --git a/packages/plasma-core/src/components/ModalBase/hooks.ts b/packages/plasma-core/src/components/ModalBase/hooks.ts
index 8e843600f8..3c2afa919e 100644
--- a/packages/plasma-core/src/components/ModalBase/hooks.ts
+++ b/packages/plasma-core/src/components/ModalBase/hooks.ts
@@ -9,7 +9,7 @@ export { useModalAnimation };
 
 const ESCAPE_KEYCODE = 27;
 
-export const useModal = ({ id, popupInfo, closeOnEsc = true, onEscKeyDown, onClose }: UseModalArgs) => {
+export const useModal = ({ id, popupInfo, onEscKeyDown, onClose, closeOnEsc = true }: UseModalArgs) => {
     const popupController = usePopupBaseContext();
 
     // При ESC закрывает текущее окно, если это возможно
diff --git a/packages/plasma-core/src/components/ModalBase/index.ts b/packages/plasma-core/src/components/ModalBase/index.ts
index 9114c4c378..37d9e62c98 100644
--- a/packages/plasma-core/src/components/ModalBase/index.ts
+++ b/packages/plasma-core/src/components/ModalBase/index.ts
@@ -1,5 +1,5 @@
 export { ModalBase } from './ModalBase';
 export { useModal, useModalAnimation } from './hooks';
-export { ModalOverlay } from './ModalOverlay';
+export { ModalOverlay, modalBaseOverlayClass } from './ModalOverlay';
 
 export type { ModalBaseProps, ModalAnimationInfo, ModalBaseRootProps, ModalOverlayProps, UseModalArgs } from './types';
diff --git a/packages/plasma-core/src/components/ModalBase/types.ts b/packages/plasma-core/src/components/ModalBase/types.ts
index 69f74587a5..9065bd1a6d 100644
--- a/packages/plasma-core/src/components/ModalBase/types.ts
+++ b/packages/plasma-core/src/components/ModalBase/types.ts
@@ -36,15 +36,12 @@ export interface ModalBaseProps extends PopupBaseProps {
      */
     onClose?: () => void;
 }
-export interface ModalAnimationInfo extends PopupAnimationInfo {}
-export interface ModalBaseRootProps
-    extends PopupRootProps,
-        Pick<ModalBaseProps, 'initialFocusRef' | 'focusAfterRef' | 'onClose'> {}
+export type ModalAnimationInfo = PopupAnimationInfo;
 
-export interface ModalOverlayProps
-    extends Pick<PopupRootProps, 'id' | 'animationInfo' | 'zIndex'>,
-        Pick<ModalBaseProps, 'withBlur' | 'closeOnOverlayClick' | 'onOverlayClick' | 'onClose'> {}
+export type ModalBaseRootProps = PopupRootProps & Pick<ModalBaseProps, 'initialFocusRef' | 'focusAfterRef' | 'onClose'>;
 
-export interface UseModalArgs
-    extends Pick<UsePopupArgs, 'id' | 'popupInfo'>,
-        Pick<ModalBaseProps, 'closeOnEsc' | 'onEscKeyDown' | 'onClose'> {}
+export type ModalOverlayProps = Pick<PopupRootProps, 'id' | 'animationInfo' | 'zIndex'> &
+    Pick<ModalBaseProps, 'withBlur' | 'closeOnOverlayClick' | 'onOverlayClick' | 'onClose'>;
+
+export type UseModalArgs = Pick<UsePopupArgs, 'id' | 'popupInfo'> &
+    Pick<ModalBaseProps, 'closeOnEsc' | 'onEscKeyDown' | 'onClose'>;
diff --git a/packages/plasma-core/src/components/PopupBase/PopupBase.tsx b/packages/plasma-core/src/components/PopupBase/PopupBase.tsx
index dc22762958..85fa57d40c 100644
--- a/packages/plasma-core/src/components/PopupBase/PopupBase.tsx
+++ b/packages/plasma-core/src/components/PopupBase/PopupBase.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
+import styled from 'styled-components';
 
 import { useForkRef, useUniqId } from '../../hooks';
 
@@ -8,7 +9,7 @@ import { POPOVER_PORTAL_ID } from './PopupBaseContext';
 import { PopupBaseRoot } from './PopupBaseRoot';
 import { usePopup } from './hooks';
 
-export const DEFAULT_Z_INDEX = 9000;
+const StyledPortal = styled.div``;
 
 /**
  * Базовый копмонент PopupBase.
@@ -74,11 +75,10 @@ export const PopupBase = React.forwardRef<HTMLDivElement, PopupBaseProps>(
             <>
                 {portalRef.current &&
                     ReactDOM.createPortal(
-                        <div {...rest}>
+                        <StyledPortal {...rest}>
                             {overlay}
                             <PopupBaseRoot
                                 id={innerId}
-                                className="popup-base-root"
                                 ref={innerRef}
                                 placement={placement}
                                 frame={frame}
@@ -89,7 +89,7 @@ export const PopupBase = React.forwardRef<HTMLDivElement, PopupBaseProps>(
                             >
                                 {children}
                             </PopupBaseRoot>
-                        </div>,
+                        </StyledPortal>,
                         portalRef.current,
                     )}
             </>
diff --git a/packages/plasma-core/src/components/PopupBase/PopupBaseRoot.tsx b/packages/plasma-core/src/components/PopupBase/PopupBaseRoot.tsx
index 2ce873c5eb..3c722556e1 100644
--- a/packages/plasma-core/src/components/PopupBase/PopupBaseRoot.tsx
+++ b/packages/plasma-core/src/components/PopupBase/PopupBaseRoot.tsx
@@ -5,29 +5,22 @@ import { useForkRef } from '../../hooks';
 
 import { usePopupBaseContext } from './PopupBaseContext';
 import { handlePosition } from './utils';
-import { PopupBasePlacement, PopupInfo, PopupRootProps } from './types';
-
-interface VisibleProps {
-    endTransition?: boolean;
-    endAnimation?: boolean;
-    placement?: PopupBasePlacement;
-    offset?: [number | string, number | string];
-    frame?: 'document' | React.RefObject<HTMLElement>;
-    id?: string;
-    withAnimation?: boolean;
-    popupInfo?: PopupInfo;
-    zIndex?: string;
-}
+import { PopupRootContainerProps, PopupRootProps } from './types';
 
 export const DEFAULT_Z_INDEX = 9000;
 
+/*
+ * Класс корневого компонента PopupBaseRoot: `popup-base-root`
+ */
+export const popupBaseRootClass = 'popup-base-root';
+
 const PopupBaseView = styled.div`
     position: relative;
     max-width: 100%;
     pointer-events: all;
 `;
 
-const Container = styled.div<VisibleProps>`
+const PopupRootContainer = styled.div<PopupRootContainerProps>`
     ${({ frame }) => css`
         position: ${frame === 'document' ? 'fixed' : 'absolute'};
     `}
@@ -41,33 +34,17 @@ const Container = styled.div<VisibleProps>`
 
 /**
  * Корень PopupBase.
- * Управляет показом/скрытием и анимацией высплывающего окна.
+ * Управляет показом/скрытием и анимацией всплывающего окна.
  */
 export const PopupBaseRoot = React.forwardRef<HTMLDivElement, PopupRootProps>(
     ({ id, placement, offset, frame, setVisible, children, role, zIndex, animationInfo, ...rest }, ref) => {
-        // Внутренее состояние, необходимое для правильного отображения вложенных окон, а также для анимации
         const contentRef = useRef<HTMLDivElement | null>(null);
         const innerRef = useForkRef<HTMLDivElement>(contentRef, ref);
 
         const popupController = usePopupBaseContext();
 
         const handleAnimationEnd = useCallback(
-            (e: React.AnimationEvent<HTMLDivElement>) => {
-                if (!contentRef || e.target !== contentRef.current) {
-                    return;
-                }
-                e.stopPropagation();
-                if (animationInfo?.endAnimation) {
-                    popupController.unregister(id);
-                    setVisible(false);
-                    animationInfo.setEndAnimation(false);
-                }
-            },
-            [popupController.unregister, animationInfo, setVisible],
-        );
-
-        const handleTransitionEnd = useCallback(
-            (e: React.TransitionEvent<HTMLDivElement>) => {
+            (e: React.AnimationEvent<HTMLDivElement> | React.TransitionEvent<HTMLDivElement>) => {
                 if (!contentRef || e.target !== contentRef.current) {
                     return;
                 }
@@ -82,19 +59,19 @@ export const PopupBaseRoot = React.forwardRef<HTMLDivElement, PopupRootProps>(
         );
 
         return (
-            <Container
-                className="popup-base-root"
+            <PopupRootContainer
+                className={popupBaseRootClass}
                 ref={innerRef}
                 placement={placement}
                 frame={frame}
                 offset={offset}
                 zIndex={zIndex}
                 onAnimationEnd={handleAnimationEnd}
-                onTransitionEnd={handleTransitionEnd}
+                onTransitionEnd={handleAnimationEnd}
                 {...rest}
             >
                 <PopupBaseView role={role}>{children}</PopupBaseView>
-            </Container>
+            </PopupRootContainer>
         );
     },
 );
diff --git a/packages/plasma-core/src/components/PopupBase/index.ts b/packages/plasma-core/src/components/PopupBase/index.ts
index 428e456b89..4f60bd46c2 100644
--- a/packages/plasma-core/src/components/PopupBase/index.ts
+++ b/packages/plasma-core/src/components/PopupBase/index.ts
@@ -1,7 +1,7 @@
 export { PopupBaseProvider, usePopupBaseContext } from './PopupBaseContext';
 export { PopupBase } from './PopupBase';
 export { usePopupAnimation, usePopup } from './hooks';
-export { PopupBaseRoot } from './PopupBaseRoot';
+export { PopupBaseRoot, popupBaseRootClass } from './PopupBaseRoot';
 
 export type {
     PopupBasePlacement,
diff --git a/packages/plasma-core/src/components/PopupBase/types.ts b/packages/plasma-core/src/components/PopupBase/types.ts
index 248fbab0a7..773d165592 100644
--- a/packages/plasma-core/src/components/PopupBase/types.ts
+++ b/packages/plasma-core/src/components/PopupBase/types.ts
@@ -72,3 +72,8 @@ export interface PopupRootProps extends Omit<PopupBaseProps, 'isOpen' | 'overlay
 export interface UsePopupArgs extends Pick<PopupBaseProps, 'isOpen' | 'withAnimation' | 'popupInfo' | 'animationInfo'> {
     id: string;
 }
+
+export interface PopupRootContainerProps extends Omit<PopupBaseProps, 'isOpen' | 'overlay'> {
+    endTransition?: boolean;
+    endAnimation?: boolean;
+}
diff --git a/packages/plasma-hope/api/plasma-hope.api.md b/packages/plasma-hope/api/plasma-hope.api.md
index 77bb7045c1..98c8034898 100644
--- a/packages/plasma-hope/api/plasma-hope.api.md
+++ b/packages/plasma-hope/api/plasma-hope.api.md
@@ -96,6 +96,7 @@ import { LineSkeletonProps } from '@salutejs/plasma-core';
 import { MaxLinesProps } from '@salutejs/plasma-core';
 import { ModalAnimationInfo } from '@salutejs/plasma-core';
 import { ModalBase } from '@salutejs/plasma-core';
+import { modalBaseOverlayClass } from '@salutejs/plasma-core';
 import { ModalBaseProps } from '@salutejs/plasma-core';
 import { ModalBaseRootProps } from '@salutejs/plasma-core';
 import { ModalOverlay } from '@salutejs/plasma-core';
@@ -120,6 +121,7 @@ import { PopupBase } from '@salutejs/plasma-core';
 import { PopupBasePlacement } from '@salutejs/plasma-core';
 import { PopupBaseProps } from '@salutejs/plasma-core';
 import { PopupBaseProvider } from '@salutejs/plasma-core';
+import { popupBaseRootClass } from '@salutejs/plasma-core';
 import { PopupContextType } from '@salutejs/plasma-core';
 import { PopupInfo } from '@salutejs/plasma-core';
 import { PopupProps } from '@salutejs/plasma-core';
@@ -915,6 +917,8 @@ export { ModalAnimationInfo }
 
 export { ModalBase }
 
+export { modalBaseOverlayClass }
+
 export { ModalBaseProps }
 
 export { ModalBaseRootProps }
@@ -1021,6 +1025,8 @@ export { PopupBaseProps }
 
 export { PopupBaseProvider }
 
+export { popupBaseRootClass }
+
 export { PopupContextType }
 
 export { PopupInfo }
diff --git a/packages/plasma-hope/src/components/ModalBase/index.ts b/packages/plasma-hope/src/components/ModalBase/index.ts
index 04359e788f..31e5579189 100644
--- a/packages/plasma-hope/src/components/ModalBase/index.ts
+++ b/packages/plasma-hope/src/components/ModalBase/index.ts
@@ -1,6 +1,6 @@
 export { ModalBase } from '@salutejs/plasma-core';
 export { useModal, useModalAnimation } from '@salutejs/plasma-core';
-export { ModalOverlay } from '@salutejs/plasma-core';
+export { ModalOverlay, modalBaseOverlayClass } from '@salutejs/plasma-core';
 
 export type {
     ModalBaseProps,
diff --git a/packages/plasma-hope/src/components/PopupBase/index.ts b/packages/plasma-hope/src/components/PopupBase/index.ts
index e24299e597..cc1be28253 100644
--- a/packages/plasma-hope/src/components/PopupBase/index.ts
+++ b/packages/plasma-hope/src/components/PopupBase/index.ts
@@ -1,5 +1,5 @@
 export { PopupBaseProvider, usePopupBaseContext } from '@salutejs/plasma-core';
-export { PopupBase } from '@salutejs/plasma-core';
+export { PopupBase, popupBaseRootClass } from '@salutejs/plasma-core';
 export { usePopup, usePopupAnimation } from '@salutejs/plasma-core';
 
 export type {
diff --git a/packages/plasma-ui/src/components/Confirm/Confirm.component-test.tsx b/packages/plasma-ui/src/components/Confirm/Confirm.component-test.tsx
index 8630ac6ef4..95dd8761dd 100644
--- a/packages/plasma-ui/src/components/Confirm/Confirm.component-test.tsx
+++ b/packages/plasma-ui/src/components/Confirm/Confirm.component-test.tsx
@@ -289,8 +289,8 @@ describe('Confirm', () => {
         });
     });
 
-    describe('', () => {
-        it('placement: center', () => {
+    describe('_placement', () => {
+        it('center', () => {
             mount(
                 <CypressTestDecorator>
                     <WrappedConfirm visible placement="center" stretch={false} view="primary" {...props} />
@@ -300,7 +300,7 @@ describe('Confirm', () => {
             cy.matchImageSnapshot();
         });
 
-        it('placement: bottom + left', () => {
+        it('bottom-left', () => {
             mount(
                 <CypressTestDecorator>
                     <WrappedConfirm visible placement="bottom-left" stretch={false} view="primary" {...props} />
@@ -310,7 +310,7 @@ describe('Confirm', () => {
             cy.matchImageSnapshot();
         });
 
-        it('placement: top-right + offset', () => {
+        it('top-right + offset', () => {
             mount(
                 <CypressTestDecorator>
                     <WrappedConfirm
@@ -327,7 +327,7 @@ describe('Confirm', () => {
             cy.matchImageSnapshot();
         });
 
-        it('placement: bottom + stretch', () => {
+        it('bottom + stretch', () => {
             mount(
                 <CypressTestDecorator>
                     <WrappedConfirm visible placement="bottom" view="primary" {...props} />
diff --git a/packages/plasma-ui/src/components/Confirm/Confirm.stories.tsx b/packages/plasma-ui/src/components/Confirm/Confirm.stories.tsx
index 746d21de2e..71a9e9d30c 100644
--- a/packages/plasma-ui/src/components/Confirm/Confirm.stories.tsx
+++ b/packages/plasma-ui/src/components/Confirm/Confirm.stories.tsx
@@ -168,7 +168,7 @@ export const ExtraContent: Story<ConfirmProps & { offsetX: number; offsetY: numb
     );
 
     return (
-        <>
+        <PopupBaseProvider>
             <Button text="Show Confirm" onClick={() => setVisible(true)} />
             <Confirm
                 visible={visible}
@@ -178,7 +178,7 @@ export const ExtraContent: Story<ConfirmProps & { offsetX: number; offsetY: numb
                 offset={[offsetX, offsetY]}
                 {...rest}
             />
-        </>
+        </PopupBaseProvider>
     );
 };
 
diff --git a/packages/plasma-ui/src/components/Confirm/Confirm.tsx b/packages/plasma-ui/src/components/Confirm/Confirm.tsx
index 4717b2f0ed..14dd88104c 100644
--- a/packages/plasma-ui/src/components/Confirm/Confirm.tsx
+++ b/packages/plasma-ui/src/components/Confirm/Confirm.tsx
@@ -7,8 +7,8 @@ import { FlexDirectionProperty } from 'csstype';
 import { mediaQuery } from '../../utils';
 import { Button, ButtonProps } from '../Button';
 import { TextBox, TextBoxTitle, TextBoxSubTitle } from '../TextBox';
-import { ModalBase, useModalAnimation } from '../ModalBase';
-import { PopupBasePlacement } from '../PopupBase';
+import { ModalBase, modalBaseOverlayClass, useModalAnimation } from '../ModalBase';
+import { PopupBasePlacement, popupBaseRootClass } from '../PopupBase';
 import { Cell } from '../Cell';
 
 const flexDirection: Record<Direction, FlexDirectionProperty> = {
@@ -206,7 +206,7 @@ const StyledCell = styled(Cell)`
 `;
 
 const StyledModal = styled(ModalBase)`
-    & > .popup-base-root, .modal-base-overlay {
+    & > .${popupBaseRootClass}, .${modalBaseOverlayClass} {
         ${({ animationInfo }) =>
             animationInfo?.endTransition
                 ? css`
diff --git a/packages/plasma-ui/src/components/ModalBase/ModalBase.stories.tsx b/packages/plasma-ui/src/components/ModalBase/ModalBase.stories.tsx
index b71ffb17a8..5e0ffc82e7 100644
--- a/packages/plasma-ui/src/components/ModalBase/ModalBase.stories.tsx
+++ b/packages/plasma-ui/src/components/ModalBase/ModalBase.stories.tsx
@@ -6,9 +6,9 @@ import { surfaceSolid02, darkOverlayBlur, overlaySoft } from '@salutejs/plasma-t
 import { SSRProvider } from '../SSRProvider';
 import { InSpacingDecorator } from '../../helpers';
 import { Button } from '../Button';
-import { PopupBaseProvider } from '../PopupBase';
+import { PopupBaseProvider, popupBaseRootClass } from '../PopupBase';
 
-import { ModalBase, useModalAnimation } from '.';
+import { ModalBase, modalBaseOverlayClass, useModalAnimation } from '.';
 
 export default {
     title: 'Controls/ModalBase',
@@ -65,8 +65,7 @@ const Content = styled.div`
 `;
 
 const StyledModal = styled(ModalBase)`
-    & > .popup-base-root,
-    .modal-base-overlay {
+    & > .${popupBaseRootClass}, .${modalBaseOverlayClass} {
         animation: ${({ theme, withAnimation, animationInfo }) =>
             /* eslint-disable-next-line no-nested-ternary */
             theme.lowPerformance || !withAnimation
diff --git a/packages/plasma-ui/src/components/ModalBase/index.ts b/packages/plasma-ui/src/components/ModalBase/index.ts
index 04359e788f..31e5579189 100644
--- a/packages/plasma-ui/src/components/ModalBase/index.ts
+++ b/packages/plasma-ui/src/components/ModalBase/index.ts
@@ -1,6 +1,6 @@
 export { ModalBase } from '@salutejs/plasma-core';
 export { useModal, useModalAnimation } from '@salutejs/plasma-core';
-export { ModalOverlay } from '@salutejs/plasma-core';
+export { ModalOverlay, modalBaseOverlayClass } from '@salutejs/plasma-core';
 
 export type {
     ModalBaseProps,
diff --git a/packages/plasma-ui/src/components/Popover/Popover.stories.tsx b/packages/plasma-ui/src/components/Popover/Popover.stories.tsx
deleted file mode 100644
index 4ab3ddbed5..0000000000
--- a/packages/plasma-ui/src/components/Popover/Popover.stories.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Story, Meta } from '@storybook/react';
-import { surfaceSolid03 } from '@salutejs/plasma-tokens';
-
-import { InSpacingDecorator, disableProps } from '../../helpers';
-import { Button } from '../Button';
-
-import { Popover, PopoverProps, PopoverPlacement } from '.';
-
-const placements: Array<PopoverPlacement> = ['top', 'bottom', 'right', 'left', 'auto'];
-
-export default {
-    title: 'Controls/Popover',
-    decorators: [InSpacingDecorator],
-} as Meta;
-
-const StyledArrow = styled.div`
-    visibility: hidden;
-
-    &,
-    &::before {
-        position: absolute;
-        width: 0.5rem;
-        height: 0.5rem;
-        background: ${surfaceSolid03};
-    }
-
-    &::before {
-        visibility: visible;
-        content: '';
-        transform: rotate(45deg);
-    }
-`;
-
-const StyledContent = styled.div`
-    background: ${surfaceSolid03};
-    padding: 1rem;
-
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-`;
-
-export const Live: Story<PopoverProps & { skidding?: number; distance?: number }> = ({
-    skidding = 0,
-    distance = 0,
-    ...args
-}) => {
-    const [isOpen, setIsOpen] = React.useState(false);
-
-    return (
-        <>
-            <Popover
-                isOpen={isOpen}
-                onToggle={(is) => setIsOpen(is)}
-                role="presentation"
-                id="popover"
-                target={<Button>Target</Button>}
-                arrow={<StyledArrow />}
-                offset={[skidding, distance]}
-                {...args}
-            >
-                <StyledContent>
-                    <>Content</>
-                    <Button onClick={() => setIsOpen(false)}>close1</Button>
-                    <Button onClick={() => setIsOpen(false)}>close2</Button>
-                </StyledContent>
-            </Popover>
-        </>
-    );
-};
-
-Live.args = {
-    placement: 'bottom',
-    trigger: 'click',
-    closeOnOverlayClick: true,
-    closeOnEsc: true,
-    isFocusTrapped: true,
-    skidding: 0,
-    distance: 6,
-};
-
-Live.argTypes = {
-    placement: {
-        options: placements,
-        control: {
-            type: 'select',
-        },
-    },
-    trigger: {
-        options: ['click', 'hover'],
-        control: {
-            type: 'select',
-        },
-    },
-    ...disableProps(['isOpen']),
-};
diff --git a/packages/plasma-ui/src/components/Popover/index.ts b/packages/plasma-ui/src/components/Popover/index.ts
deleted file mode 100644
index 906ebfb660..0000000000
--- a/packages/plasma-ui/src/components/Popover/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { Popover } from '@salutejs/plasma-core';
-export type { PopoverProps, PopoverPlacement } from '@salutejs/plasma-core';
diff --git a/packages/plasma-ui/src/components/PopupBase/PopupBase.stories.tsx b/packages/plasma-ui/src/components/PopupBase/PopupBase.stories.tsx
index 87139e47ac..785c45d3a6 100644
--- a/packages/plasma-ui/src/components/PopupBase/PopupBase.stories.tsx
+++ b/packages/plasma-ui/src/components/PopupBase/PopupBase.stories.tsx
@@ -7,7 +7,7 @@ import { SSRProvider } from '../SSRProvider';
 import { InSpacingDecorator } from '../../helpers';
 import { Button } from '../Button';
 
-import { PopupBase, PopupBaseProvider, usePopupAnimation } from '.';
+import { PopupBase, popupBaseRootClass, PopupBaseProvider, usePopupAnimation } from '.';
 
 export default {
     title: 'Controls/PopupBase',
@@ -65,7 +65,7 @@ const Content = styled.div`
 `;
 
 const StyledPopupAnimation = styled(PopupBase)`
-    & > .popup-base-root {
+    & > .${popupBaseRootClass} {
         animation: ${({ theme, withAnimation, animationInfo }) =>
             /* eslint-disable-next-line no-nested-ternary */
             theme.lowPerformance || !withAnimation
@@ -97,7 +97,7 @@ const StyledPopupAnimation = styled(PopupBase)`
 `;
 
 const StyledPopupTransition = styled(PopupBase)`
-    & > .popup-base-root {
+    & > .${popupBaseRootClass} {
         /* stylelint-disable */
         ${({ animationInfo }) =>
             animationInfo?.endTransition
diff --git a/packages/plasma-ui/src/components/PopupBase/index.ts b/packages/plasma-ui/src/components/PopupBase/index.ts
index e24299e597..cc1be28253 100644
--- a/packages/plasma-ui/src/components/PopupBase/index.ts
+++ b/packages/plasma-ui/src/components/PopupBase/index.ts
@@ -1,5 +1,5 @@
 export { PopupBaseProvider, usePopupBaseContext } from '@salutejs/plasma-core';
-export { PopupBase } from '@salutejs/plasma-core';
+export { PopupBase, popupBaseRootClass } from '@salutejs/plasma-core';
 export { usePopup, usePopupAnimation } from '@salutejs/plasma-core';
 
 export type {
diff --git a/packages/plasma-ui/src/index.ts b/packages/plasma-ui/src/index.ts
index 11e8330c72..4bf4918f24 100644
--- a/packages/plasma-ui/src/index.ts
+++ b/packages/plasma-ui/src/index.ts
@@ -14,7 +14,6 @@ export * from './components/Marquee';
 export * from './components/ModalBase';
 export * from './components/PaginationDots';
 export * from './components/Pickers';
-export * from './components/Popover';
 export * from './components/PopupBase';
 export * from './components/Price';
 export * from './components/ProductCard';
diff --git a/packages/plasma-web/api/plasma-web.api.md b/packages/plasma-web/api/plasma-web.api.md
index 85edae524e..cf039a6540 100644
--- a/packages/plasma-web/api/plasma-web.api.md
+++ b/packages/plasma-web/api/plasma-web.api.md
@@ -150,6 +150,7 @@ import { MediaQueryFunction } from '@salutejs/plasma-hope';
 import { Modal } from '@salutejs/plasma-hope';
 import { ModalAnimationInfo } from '@salutejs/plasma-hope';
 import { ModalBase } from '@salutejs/plasma-hope';
+import { modalBaseOverlayClass } from '@salutejs/plasma-hope';
 import { ModalBaseProps } from '@salutejs/plasma-hope';
 import { ModalBaseRootProps } from '@salutejs/plasma-hope';
 import { ModalOverlay } from '@salutejs/plasma-hope';
@@ -183,6 +184,7 @@ import { PopupBase } from '@salutejs/plasma-hope';
 import { PopupBasePlacement } from '@salutejs/plasma-hope';
 import { PopupBaseProps } from '@salutejs/plasma-hope';
 import { PopupBaseProvider } from '@salutejs/plasma-hope';
+import { popupBaseRootClass } from '@salutejs/plasma-hope';
 import { PopupContextType } from '@salutejs/plasma-hope';
 import { PopupInfo } from '@salutejs/plasma-hope';
 import { PopupProps } from '@salutejs/plasma-hope';
@@ -614,6 +616,8 @@ export { ModalAnimationInfo }
 
 export { ModalBase }
 
+export { modalBaseOverlayClass }
+
 export { ModalBaseProps }
 
 export { ModalBaseRootProps }
@@ -683,6 +687,8 @@ export { PopupBaseProps }
 
 export { PopupBaseProvider }
 
+export { popupBaseRootClass }
+
 export { PopupContextType }
 
 export { PopupInfo }
diff --git a/packages/plasma-web/src/components/ModalBase/ModalBase.stories.tsx b/packages/plasma-web/src/components/ModalBase/ModalBase.stories.tsx
index c6ed06a153..d4a34179a7 100644
--- a/packages/plasma-web/src/components/ModalBase/ModalBase.stories.tsx
+++ b/packages/plasma-web/src/components/ModalBase/ModalBase.stories.tsx
@@ -6,9 +6,9 @@ import { surfaceSolid02, darkOverlayBlur, overlaySoft } from '@salutejs/plasma-t
 import { SSRProvider } from '../SSRProvider';
 import { InSpacingDecorator } from '../../helpers';
 import { Button } from '../Button';
-import { PopupBaseProvider } from '../PopupBase';
+import { PopupBaseProvider, popupBaseRootClass } from '../PopupBase';
 
-import { ModalBase, useModalAnimation } from '.';
+import { ModalBase, modalBaseOverlayClass, useModalAnimation } from '.';
 
 export default {
     title: 'Controls/ModalBase',
@@ -65,8 +65,7 @@ const Content = styled.div`
 `;
 
 const StyledModal = styled(ModalBase)`
-    & > .popup-base-root,
-    .modal-base-overlay {
+    & > .${popupBaseRootClass}, .${modalBaseOverlayClass} {
         animation: ${({ theme, withAnimation, animationInfo }) =>
             /* eslint-disable-next-line no-nested-ternary */
             theme.lowPerformance || !withAnimation
diff --git a/packages/plasma-web/src/components/ModalBase/index.ts b/packages/plasma-web/src/components/ModalBase/index.ts
index 8832d24af0..6000bc2577 100644
--- a/packages/plasma-web/src/components/ModalBase/index.ts
+++ b/packages/plasma-web/src/components/ModalBase/index.ts
@@ -1,6 +1,6 @@
 export { ModalBase } from '@salutejs/plasma-hope';
 export { useModal, useModalAnimation } from '@salutejs/plasma-hope';
-export { ModalOverlay } from '@salutejs/plasma-hope';
+export { ModalOverlay, modalBaseOverlayClass } from '@salutejs/plasma-hope';
 
 export type {
     ModalBaseProps,
diff --git a/packages/plasma-web/src/components/PopupBase/PopupBase.stories.tsx b/packages/plasma-web/src/components/PopupBase/PopupBase.stories.tsx
index 0d3ce62e15..e68b2e9114 100644
--- a/packages/plasma-web/src/components/PopupBase/PopupBase.stories.tsx
+++ b/packages/plasma-web/src/components/PopupBase/PopupBase.stories.tsx
@@ -7,7 +7,7 @@ import { SSRProvider } from '../SSRProvider';
 import { InSpacingDecorator } from '../../helpers';
 import { Button } from '../Button';
 
-import { PopupBase, PopupBaseProvider, usePopupAnimation } from '.';
+import { PopupBase, PopupBaseProvider, popupBaseRootClass, usePopupAnimation } from '.';
 
 export default {
     title: 'Controls/PopupBase',
@@ -65,7 +65,7 @@ const Content = styled.div`
 `;
 
 const StyledPopupAnimation = styled(PopupBase)`
-    & > .popup-base-root {
+    & > .${popupBaseRootClass} {
         /* stylelint-disable */
         animation: ${({ theme, withAnimation, animationInfo }) =>
             /* eslint-disable-next-line no-nested-ternary */
@@ -99,7 +99,7 @@ const StyledPopupAnimation = styled(PopupBase)`
 `;
 
 const StyledPopupTransition = styled(PopupBase)`
-    & > .popup-base-root {
+    & > .${popupBaseRootClass} {
         ${({ animationInfo }) =>
             animationInfo.endTransition
                 ? css`
diff --git a/packages/plasma-web/src/components/PopupBase/index.ts b/packages/plasma-web/src/components/PopupBase/index.ts
index 9899765dd7..ce1e980914 100644
--- a/packages/plasma-web/src/components/PopupBase/index.ts
+++ b/packages/plasma-web/src/components/PopupBase/index.ts
@@ -1,5 +1,5 @@
 export { PopupBaseProvider, usePopupBaseContext } from '@salutejs/plasma-hope';
-export { PopupBase } from '@salutejs/plasma-hope';
+export { PopupBase, popupBaseRootClass } from '@salutejs/plasma-hope';
 export { usePopup, usePopupAnimation } from '@salutejs/plasma-hope';
 
 export type {
diff --git a/website/plasma-ui-docs/docs/components/ModalBase.mdx b/website/plasma-ui-docs/docs/components/ModalBase.mdx
index 1e1fe44df3..d37e346c52 100644
--- a/website/plasma-ui-docs/docs/components/ModalBase.mdx
+++ b/website/plasma-ui-docs/docs/components/ModalBase.mdx
@@ -29,7 +29,7 @@ const ModalOverlayVariables = createGlobalStyle`
 import React from 'react';
 import styled, { createGlobalStyle } from 'styled-components';
 import { surfaceSolid02, darkOverlayBlur, overlaySoft } from '@salutejs/plasma-tokens';
-import { SSRProvider, Button, ModalBase, useModalAnimation, PopupBaseProvider } from '@salutejs/plasma-ui';
+import { SSRProvider, Button, ModalBase, useModalAnimation, popupBaseRootClass, modalBaseOverlayClass, PopupBaseProvider } from '@salutejs/plasma-ui';
 
 const StyledButton = styled(Button)`
     margin-top: 1rem;
@@ -53,8 +53,8 @@ const Content = styled.div`
 `;
 
 const StyledModal = styled(ModalBase)`
-    & > .popup-base-root,
-    .modal-base-overlay {
+    & > .${popupBaseRootClass},
+    .${modalBaseOverlayClass} {
         animation: ${({ theme, withAnimation, animationInfo }) =>
             /* eslint-disable-next-line no-nested-ternary */
             theme.lowPerformance || !withAnimation
@@ -158,13 +158,13 @@ export const App {
 Подключение анимации аналогично тому, как это происходит в `PopupBase`.
 Однако подключение анимации происходит с помощью хука `useModalAnimation`.
 Также необходимо выставить флаг `withAnimation`. 
-Для добавления анимации в оверлей необходимо использовать класс `.modal-base-overlay`.
+Для добавления анимации в оверлей необходимо использовать класс `.modal-base-overlay` через переменную `modalBaseOverlayClass` из пакета.
 Пример:
 
 ```tsx
 const StyledModal = styled(ModalBase)`
-    & > .popup-base-root,
-    .modal-base-overlay {
+    & > .${popupBaseRootClass},
+    .${modalBaseOverlayClass} {
         animation: ${({ theme, withAnimation, animationInfo }) =>
             theme.lowPerformance || !withAnimation
                 ? 'unset'
diff --git a/website/plasma-ui-docs/docs/components/PopupBase.mdx b/website/plasma-ui-docs/docs/components/PopupBase.mdx
index 6778ea99fa..ece476c8bd 100644
--- a/website/plasma-ui-docs/docs/components/PopupBase.mdx
+++ b/website/plasma-ui-docs/docs/components/PopupBase.mdx
@@ -21,7 +21,7 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import { surfaceSolid03, surfaceSolid02 } from '@salutejs/plasma-tokens';
 
-import { SSRProvider, Button, PopupBase, PopupBaseProvider, usePopupAnimation } from  '@salutejs/plasma-ui';
+import { SSRProvider, Button, PopupBase, PopupBaseProvider } from  '@salutejs/plasma-ui';
 
 const StyledButton = styled(Button)`
     margin-top: 1rem;
@@ -108,12 +108,12 @@ export const App() {
 Подключение анимации происходит с помощью хука `usePopupAnimation`, который возвращает объект, необходимый для передачи в сам компонент `PopupBase`.
 Также необходимо выставить флаг `withAnimation`. 
 Сам возвращаемый объект содержит 2 флага: `endAnimation`, `endTransition`, с помощью которых и должно происходить переключение анимаций.
-Для добавления анимации необходимо использовать класс `.popup-base-root`.
+Для добавления анимации необходимо использовать класс `.popup-base-root` через переменную `popupBaseRootClass` из пакета.
 Пример:
 
 ```tsx
 const StyledPopupTransition = styled(PopupBase)`
-    & > .popup-base-root {
+    & > .${popupBaseRootClass} {
         ${({ animationInfo }) =>
             animationInfo.endTransition
                 ? css`
@@ -131,7 +131,7 @@ const StyledPopupTransition = styled(PopupBase)`
 
 ```tsx
 const StyledPopupAnimation = styled(PopupBase)`
-    & > .popup-base-root {
+    & > .${popupBaseRootClass} {
         animation: ${({ theme, withAnimation, animationInfo }) =>
             theme.lowPerformance || !withAnimation
                 ? 'unset'
@@ -167,7 +167,7 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import { surfaceSolid03, surfaceSolid02 } from '@salutejs/plasma-tokens';
 
-import { SSRProvider, Button, PopupBase, PopupBaseProvider, usePopupAnimation } from  '@salutejs/plasma-ui';
+import { SSRProvider, Button, PopupBase, PopupBaseProvider, popupBaseRootClass, usePopupAnimation } from  '@salutejs/plasma-ui';
 
 const StyledButton = styled(Button)`
     margin-top: 1rem;
@@ -200,7 +200,7 @@ const Content = styled.div`
 `;
 
 const StyledPopupAnimation = styled(PopupBase)`
-    & > .popup-base-root {
+    & > .${popupBaseRootClass} {
         /* stylelint-disable */
         animation: ${({ theme, withAnimation, animationInfo }) =>
             /* eslint-disable-next-line no-nested-ternary */
@@ -234,7 +234,7 @@ const StyledPopupAnimation = styled(PopupBase)`
 `;
 
 const StyledPopupTransition = styled(PopupBase)`
-    & > .popup-base-root {
+    & > .${popupBaseRootClass} {
         ${({ animationInfo }) =>
             animationInfo.endTransition
                 ? css`
diff --git a/website/plasma-web-docs/docs/components/ModalBase.mdx b/website/plasma-web-docs/docs/components/ModalBase.mdx
index 771e71992b..acc33f513b 100644
--- a/website/plasma-web-docs/docs/components/ModalBase.mdx
+++ b/website/plasma-web-docs/docs/components/ModalBase.mdx
@@ -29,7 +29,7 @@ const ModalOverlayVariables = createGlobalStyle`
 import React from 'react';
 import styled, { createGlobalStyle } from 'styled-components';
 import { surfaceSolid02, darkOverlayBlur, overlaySoft } from '@salutejs/plasma-tokens-web';
-import { SSRProvider, Button, ModalBase, useModalAnimation, PopupBaseProvider } from '@salutejs/plasma-web';
+import { SSRProvider, Button, ModalBase, useModalAnimation, popupBaseRootClass, modalBaseOverlayClass, PopupBaseProvider } from '@salutejs/plasma-web';
 
 const StyledButton = styled(Button)`
     margin-top: 1rem;
@@ -53,8 +53,8 @@ const Content = styled.div`
 `;
 
 const StyledModal = styled(ModalBase)`
-    & > .popup-base-root,
-    .modal-base-overlay {
+    & > .${popupBaseRootClass},
+    .${modalBaseOverlayClass} {
         animation: ${({ theme, withAnimation, animationInfo }) =>
             /* eslint-disable-next-line no-nested-ternary */
             theme.lowPerformance || !withAnimation
@@ -158,13 +158,13 @@ export const App {
 Подключение анимации аналогично тому, как это происходит в `PopupBase`.
 Однако подключение анимации происходит с помощью хука `useModalAnimation`.
 Также необходимо выставить флаг `withAnimation`. 
-Для добавления анимации в оверлей необходимо использовать класс `.modal-base-overlay`.
+Для добавления анимации в оверлей необходимо использовать класс `.modal-base-overlay` через переменную `modalBaseOverlayClass` из пакета.
 Пример:
 
 ```tsx
 const StyledModal = styled(ModalBase)`
-    & > .popup-base-root,
-    .modal-base-overlay {
+    & > .${popupBaseRootClass},
+    .${modalBaseOverlayClass} {
         animation: ${({ theme, withAnimation, animationInfo }) =>
             theme.lowPerformance || !withAnimation
                 ? 'unset'
diff --git a/website/plasma-web-docs/docs/components/PopupBase.mdx b/website/plasma-web-docs/docs/components/PopupBase.mdx
index 4e1a7de821..d7bf0cafc9 100644
--- a/website/plasma-web-docs/docs/components/PopupBase.mdx
+++ b/website/plasma-web-docs/docs/components/PopupBase.mdx
@@ -21,7 +21,7 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import { surfaceSolid03, surfaceSolid02 } from '@salutejs/plasma-tokens-web';
 
-import { SSRProvider, Button, PopupBase, PopupBaseProvider, usePopupAnimation } from  '@salutejs/plasma-web';
+import { SSRProvider, Button, PopupBase, PopupBaseProvider } from  '@salutejs/plasma-web';
 
 const StyledButton = styled(Button)`
     margin-top: 1rem;
@@ -108,12 +108,12 @@ export const App() {
 Подключение анимации происходит с помощью хука `usePopupAnimation`, который возвращает объект, необходимый для передачи в сам компонент `PopupBase`.
 Также необходимо выставить флаг `withAnimation`. 
 Сам возвращаемый объект содержит 2 флага: `endAnimation`, `endTransition`, с помощью которых и должно происходить переключение анимаций.
-Для добавления анимации необходимо использовать класс `.popup-base-root`.
+Для добавления анимации необходимо использовать класс `.popup-base-root` через переменную `popupBaseRootClass` из пакета.
 Пример:
 
 ```tsx
 const StyledPopupTransition = styled(PopupBase)`
-    & > .popup-base-root {
+    & > .${popupBaseRootClass} {
         ${({ animationInfo }) =>
             animationInfo.endTransition
                 ? css`
@@ -131,7 +131,7 @@ const StyledPopupTransition = styled(PopupBase)`
 
 ```tsx
 const StyledPopupAnimation = styled(PopupBase)`
-    & > .popup-base-root {
+    & > .${popupBaseRootClass} {
         animation: ${({ theme, withAnimation, animationInfo }) =>
             theme.lowPerformance || !withAnimation
                 ? 'unset'
@@ -167,7 +167,7 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import { surfaceSolid03, surfaceSolid02 } from '@salutejs/plasma-tokens-web';
 
-import { SSRProvider, Button, PopupBase, PopupBaseProvider, usePopupAnimation } from  '@salutejs/plasma-web';
+import { SSRProvider, Button, PopupBase, PopupBaseProvider, popupBaseRootClass, usePopupAnimation } from  '@salutejs/plasma-web';
 
 const StyledButton = styled(Button)`
     margin-top: 1rem;
@@ -200,7 +200,7 @@ const Content = styled.div`
 `;
 
 const StyledPopupAnimation = styled(PopupBase)`
-    & > .popup-base-root {
+    & > .${popupBaseRootClass} {
         /* stylelint-disable */
         animation: ${({ theme, withAnimation, animationInfo }) =>
             /* eslint-disable-next-line no-nested-ternary */
@@ -234,7 +234,7 @@ const StyledPopupAnimation = styled(PopupBase)`
 `;
 
 const StyledPopupTransition = styled(PopupBase)`
-    & > .popup-base-root {
+    & > .${popupBaseRootClass} {
         ${({ animationInfo }) =>
             animationInfo.endTransition
                 ? css`