diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md
index 00ce9db464..605cd4a869 100644
--- a/packages/plasma-b2c/api/plasma-b2c.api.md
+++ b/packages/plasma-b2c/api/plasma-b2c.api.md
@@ -111,8 +111,6 @@ import { Editable } from '@salutejs/plasma-hope';
 import { EditableProps } from '@salutejs/plasma-hope';
 import { ElasticGrid } from '@salutejs/plasma-hope';
 import { ElasticGridProps } from '@salutejs/plasma-hope';
-import { endAnimationClass } from '@salutejs/plasma-hope';
-import { endTransitionClass } from '@salutejs/plasma-hope';
 import { extractTextFrom } from '@salutejs/plasma-core';
 import { Filter } from '@salutejs/plasma-new-hope/types/engines/types';
 import { FocusProps } from '@salutejs/plasma-core';
@@ -150,12 +148,8 @@ import { MaxLinesProps } from '@salutejs/plasma-core';
 import { mediaQuery } from '@salutejs/plasma-hope';
 import { MediaQueryFunction } from '@salutejs/plasma-hope';
 import { Modal } 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';
-import { ModalOverlayProps } from '@salutejs/plasma-hope';
+import { modalClasses as modalBaseClasses } from '@salutejs/plasma-new-hope/styled-components';
+import { ModalProps as ModalBaseProps } from '@salutejs/plasma-new-hope/styled-components';
 import { ModalProps } from '@salutejs/plasma-hope';
 import { ModalsProvider } from '@salutejs/plasma-hope';
 import { ModalView } from '@salutejs/plasma-hope';
@@ -181,15 +175,13 @@ import { PopoverPlacement } from '@salutejs/plasma-new-hope';
 import { PopoverProps } from '@salutejs/plasma-new-hope';
 import { PopoverTrigger } from '@salutejs/plasma-new-hope';
 import { Popup } from '@salutejs/plasma-hope';
-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 { popupClasses as popupBaseClasses } from '@salutejs/plasma-new-hope/styled-components';
+import { PopupPlacement as PopupBasePlacement } from '@salutejs/plasma-new-hope/styled-components';
+import { PopupProps as PopupBaseProps } from '@salutejs/plasma-new-hope/styled-components';
+import { PopupProvider as PopupBaseProvider } from '@salutejs/plasma-new-hope/styled-components';
+import { PopupInfo } from '@salutejs/plasma-new-hope/styled-components';
 import { PopupProps } from '@salutejs/plasma-hope';
-import { PopupRootProps } from '@salutejs/plasma-hope';
+import { PopupProps as PopupProps_2 } from '@salutejs/plasma-new-hope';
 import { PreviewGallery } from '@salutejs/plasma-hope';
 import { PreviewGalleryItemProps } from '@salutejs/plasma-hope';
 import { PreviewGalleryProps } from '@salutejs/plasma-hope';
@@ -275,7 +267,7 @@ import { useDebouncedFunction } from '@salutejs/plasma-core';
 import { useFocusTrap } from '@salutejs/plasma-hope';
 import { useForkRef } from '@salutejs/plasma-core';
 import { useIsomorphicLayoutEffect } from '@salutejs/plasma-core';
-import { usePopupBaseContext } from '@salutejs/plasma-hope';
+import { usePopupContext as usePopupBaseContext } from '@salutejs/plasma-new-hope/styled-components';
 import { useToast } from '@salutejs/plasma-hope';
 import { ValidationResult } from '@salutejs/plasma-hope';
 import { Variant } from '@salutejs/plasma-new-hope';
@@ -531,10 +523,6 @@ export { ElasticGrid }
 
 export { ElasticGridProps }
 
-export { endAnimationClass }
-
-export { endTransitionClass }
-
 export { extractTextFrom }
 
 export { FocusProps }
@@ -612,18 +600,13 @@ export { MediaQueryFunction }
 
 export { Modal }
 
-export { ModalBase }
+// @public
+export const ModalBase: ForwardRefExoticComponent<ModalBaseProps & RefAttributes<HTMLDivElement>>;
 
-export { modalBaseOverlayClass }
+export { modalBaseClasses }
 
 export { ModalBaseProps }
 
-export { ModalBaseRootProps }
-
-export { ModalOverlay }
-
-export { ModalOverlayProps }
-
 export { ModalProps }
 
 export { ModalsProvider }
@@ -677,7 +660,10 @@ export { PopoverTrigger }
 
 export { Popup }
 
-export { PopupBase }
+// @public
+export const PopupBase: FunctionComponent<PropsType<Record<string, Variant>> & PopupProps_2 & RefAttributes<HTMLDivElement>>;
+
+export { popupBaseClasses }
 
 export { PopupBasePlacement }
 
@@ -685,16 +671,10 @@ export { PopupBaseProps }
 
 export { PopupBaseProvider }
 
-export { popupBaseRootClass }
-
-export { PopupContextType }
-
 export { PopupInfo }
 
 export { PopupProps }
 
-export { PopupRootProps }
-
 export { PreviewGallery }
 
 export { PreviewGalleryItemProps }
@@ -756,13 +736,13 @@ export const Select: React_2.ForwardRefExoticComponent<({
 } & {
     value: any;
     onChange?: ((value: any) => void) | undefined;
-} & Pick<SelectViewProps, "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "autoFocus" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "status" | "helperText" | "items" | "onItemSelect" | "isOpen"> & DropdownListCssProperties & React_2.RefAttributes<HTMLButtonElement>) | ({
+} & Pick<SelectViewProps, "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "autoFocus" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "status" | "isOpen" | "helperText" | "items" | "onItemSelect"> & DropdownListCssProperties & React_2.RefAttributes<HTMLButtonElement>) | ({
     multiselect?: true | undefined;
     separator?: string | undefined;
 } & {
     value: any;
     onChange?: ((value: any) => void) | undefined;
-} & Pick<SelectViewProps, "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "autoFocus" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "status" | "helperText" | "items" | "onItemSelect" | "isOpen"> & DropdownListCssProperties & React_2.RefAttributes<HTMLButtonElement>)>;
+} & Pick<SelectViewProps, "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "autoFocus" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "status" | "isOpen" | "helperText" | "items" | "onItemSelect"> & DropdownListCssProperties & React_2.RefAttributes<HTMLButtonElement>)>;
 
 export { SelectGroup }
 
diff --git a/packages/plasma-b2c/src/components/ModalBase/Modal.config.ts b/packages/plasma-b2c/src/components/ModalBase/Modal.config.ts
new file mode 100644
index 0000000000..2fe022abfd
--- /dev/null
+++ b/packages/plasma-b2c/src/components/ModalBase/Modal.config.ts
@@ -0,0 +1,15 @@
+import { css } from '@salutejs/plasma-new-hope/styled-components';
+
+export const config = {
+    defaults: {
+        view: 'default',
+    },
+    variations: {
+        view: {
+            default: css`
+                --plasma-modal-overlay-with-blur-color: rgba(35, 35, 35, 0.2);
+                --plasma-modal-overlay-color: rgba(8, 8, 8, 0.56);
+            `,
+        },
+    },
+};
diff --git a/packages/plasma-b2c/src/components/ModalBase/ModalBase.stories.tsx b/packages/plasma-b2c/src/components/ModalBase/ModalBase.stories.tsx
index 86889c831e..ac7455aa24 100644
--- a/packages/plasma-b2c/src/components/ModalBase/ModalBase.stories.tsx
+++ b/packages/plasma-b2c/src/components/ModalBase/ModalBase.stories.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
-import styled, { createGlobalStyle } from 'styled-components';
+import styled from 'styled-components';
 import { Story, Meta } from '@storybook/react';
-import { surfaceSolid02, darkOverlayBlur, overlaySoft } from '@salutejs/plasma-tokens-web';
+import { surfaceSolid02 } from '@salutejs/plasma-tokens-web';
 import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
 
 import { SSRProvider } from '../SSRProvider';
 import { Button } from '../Button';
-import { PopupBaseProvider, endAnimationClass, popupBaseRootClass } from '../PopupBase';
+import { PopupBaseProvider, popupBaseClasses } from '../PopupBase';
 
-import { ModalBase, modalBaseOverlayClass } from '.';
+import { ModalBase, modalBaseClasses } from '.';
 
 export default {
     title: 'Controls/ModalBase',
@@ -51,29 +51,21 @@ const StyledWrapper = styled.div`
     height: 1200px;
 `;
 
-// TODO: новый отдельный оверлей #778
-const ModalOverlayVariables = createGlobalStyle`
-    body {
-        --plasma-modal-blur-overlay-color: ${darkOverlayBlur};
-        --plasma-modal-overlay-color: ${overlaySoft};
-    }
-`;
-
 const Content = styled.div`
     background: ${surfaceSolid02};
     padding: 1rem;
 `;
 
 const StyledModal = styled(ModalBase)`
-    && > .${popupBaseRootClass}, .${modalBaseOverlayClass} {
+    && > .${popupBaseClasses.root}, .${modalBaseClasses.overlay} {
         animation: fadeIn 1s forwards;
     }
 
-    &&.${endAnimationClass} > .${popupBaseRootClass} {
+    &&.${popupBaseClasses.endAnimation} .${popupBaseClasses.root} {
         animation: fadeOut 1s forwards;
     }
 
-    &&.${endAnimationClass} > .${modalBaseOverlayClass} {
+    &&.${popupBaseClasses.endAnimation} .${modalBaseClasses.overlay} {
         animation: fadeOut 1s forwards;
     }
 
@@ -106,7 +98,6 @@ export const ModalBaseDemo: Story<ModalBaseStoryProps> = ({ placement, offsetX,
     return (
         <SSRProvider>
             <StyledWrapper>
-                <ModalOverlayVariables />
                 <PopupBaseProvider>
                     <div style={{ display: 'flex', flexDirection: 'column' }}>
                         <StyledButton text="Открыть A" onClick={() => setIsOpenA(true)} />
diff --git a/packages/plasma-b2c/src/components/ModalBase/ModalBase.tsx b/packages/plasma-b2c/src/components/ModalBase/ModalBase.tsx
new file mode 100644
index 0000000000..e78fb8d97e
--- /dev/null
+++ b/packages/plasma-b2c/src/components/ModalBase/ModalBase.tsx
@@ -0,0 +1,14 @@
+import { modalConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+import type { ModalProps } from '@salutejs/plasma-new-hope/styled-components';
+
+import { config } from './Modal.config';
+
+const mergedConfig = mergeConfig(modalConfig, config);
+const ModalBaseComponent = component(mergedConfig) as React.ForwardRefExoticComponent<
+    ModalProps & React.RefAttributes<HTMLDivElement>
+>;
+
+/**
+ * Модальное окно.
+ */
+export const ModalBase = ModalBaseComponent;
diff --git a/packages/plasma-b2c/src/components/ModalBase/index.ts b/packages/plasma-b2c/src/components/ModalBase/index.ts
index ec30828578..57277868ac 100644
--- a/packages/plasma-b2c/src/components/ModalBase/index.ts
+++ b/packages/plasma-b2c/src/components/ModalBase/index.ts
@@ -1,2 +1,4 @@
-export { ModalBase, ModalOverlay, modalBaseOverlayClass } from '@salutejs/plasma-hope';
-export type { ModalBaseProps, ModalBaseRootProps, ModalOverlayProps } from '@salutejs/plasma-hope';
+export { ModalBase } from './ModalBase';
+export { modalClasses as modalBaseClasses } from '@salutejs/plasma-new-hope/styled-components';
+
+export type { ModalProps as ModalBaseProps } from '@salutejs/plasma-new-hope/styled-components';
diff --git a/packages/plasma-b2c/src/components/PopupBase/PopupBase.stories.tsx b/packages/plasma-b2c/src/components/PopupBase/PopupBase.stories.tsx
index 669eb9b5c8..e91160cf92 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, endAnimationClass, endTransitionClass, popupBaseRootClass } from '.';
+import { PopupBase, popupBaseClasses, PopupBaseProvider } from '.';
 
 export default {
     title: 'Controls/PopupBase',
@@ -65,11 +65,11 @@ const Content = styled.div`
 `;
 
 const StyledPopupAnimation = styled(PopupBase)`
-    && > .${popupBaseRootClass} {
+    && .${popupBaseClasses.root} {
         animation: fadeIn 1s forwards;
     }
 
-    &&.${endAnimationClass} > .${popupBaseRootClass} {
+    &&.${popupBaseClasses.endAnimation} .${popupBaseClasses.root} {
         animation: fadeOut 1s forwards;
     }
 
@@ -95,12 +95,12 @@ const StyledPopupAnimation = styled(PopupBase)`
 `;
 
 const StyledPopupTransition = styled(PopupBase)`
-    && > .${popupBaseRootClass} {
+    && .${popupBaseClasses.root} {
         opacity: 1;
         transition: opacity 0.5s 0.1s;
     }
 
-    &&.${endTransitionClass} > .${popupBaseRootClass} {
+    &&.${popupBaseClasses.endTransition} .${popupBaseClasses.root} {
         opacity: 0;
         transition: opacity 0.5s 0.1s;
     }
diff --git a/packages/plasma-b2c/src/components/PopupBase/PopupBase.tsx b/packages/plasma-b2c/src/components/PopupBase/PopupBase.tsx
new file mode 100644
index 0000000000..5c101eaa82
--- /dev/null
+++ b/packages/plasma-b2c/src/components/PopupBase/PopupBase.tsx
@@ -0,0 +1,8 @@
+import { popupConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+
+const mergedConfig = mergeConfig(popupConfig);
+
+/**
+ * Базовый компонент PopupBase.
+ */
+export const PopupBase = component(mergedConfig);
diff --git a/packages/plasma-b2c/src/components/PopupBase/index.ts b/packages/plasma-b2c/src/components/PopupBase/index.ts
index 65596fbf1f..5b0fd07f15 100644
--- a/packages/plasma-b2c/src/components/PopupBase/index.ts
+++ b/packages/plasma-b2c/src/components/PopupBase/index.ts
@@ -1,16 +1,13 @@
 export {
-    PopupBaseProvider,
-    usePopupBaseContext,
-    PopupBase,
-    popupBaseRootClass,
-    endAnimationClass,
-    endTransitionClass,
-} from '@salutejs/plasma-hope';
+    usePopupContext as usePopupBaseContext,
+    PopupProvider as PopupBaseProvider,
+    popupClasses as popupBaseClasses,
+} from '@salutejs/plasma-new-hope/styled-components';
+
+export { PopupBase } from './PopupBase';
 
 export type {
-    PopupBasePlacement,
+    PopupPlacement as PopupBasePlacement,
     PopupInfo,
-    PopupContextType,
-    PopupBaseProps,
-    PopupRootProps,
-} from '@salutejs/plasma-hope';
+    PopupProps as PopupBaseProps,
+} from '@salutejs/plasma-new-hope/styled-components';
diff --git a/packages/plasma-hope/api/plasma-hope.api.md b/packages/plasma-hope/api/plasma-hope.api.md
index 02f7182171..8199403389 100644
--- a/packages/plasma-hope/api/plasma-hope.api.md
+++ b/packages/plasma-hope/api/plasma-hope.api.md
@@ -63,8 +63,6 @@ import { DisabledProps } from '@salutejs/plasma-core';
 import { DsplL } from '@salutejs/plasma-typo';
 import { DsplM } from '@salutejs/plasma-typo';
 import { DsplS } from '@salutejs/plasma-typo';
-import { endAnimationClass } from '@salutejs/plasma-core';
-import { endTransitionClass } from '@salutejs/plasma-core';
 import { extractTextFrom } from '@salutejs/plasma-core';
 import { FC } from 'react';
 import type { FieldProps as FieldProps_2 } from '@salutejs/plasma-core';
@@ -96,12 +94,6 @@ import { KeyboardEvent as KeyboardEvent_2 } from 'react';
 import { LineSkeleton } from '@salutejs/plasma-core';
 import { LineSkeletonProps } from '@salutejs/plasma-core';
 import { MaxLinesProps } 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';
-import { ModalOverlayProps } from '@salutejs/plasma-core';
 import { monthLongName } from '@salutejs/plasma-core';
 import { monthShortName } from '@salutejs/plasma-core';
 import { MutableRefObject } from 'react';
@@ -118,15 +110,7 @@ import { ParagraphText2 } from '@salutejs/plasma-core';
 import { PickOptional } from '@salutejs/plasma-core';
 import { PinProps } from '@salutejs/plasma-core';
 import { Popup } from '@salutejs/plasma-core';
-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';
-import { PopupRootProps } from '@salutejs/plasma-core';
 import type { PriceProps as PriceProps_2 } from '@salutejs/plasma-core';
 import { PropsWithChildren } from 'react';
 import { radiuses } from '@salutejs/plasma-core';
@@ -181,7 +165,6 @@ import { useDebouncedFunction } from '@salutejs/plasma-core';
 import { useFocusTrap } from '@salutejs/plasma-core';
 import { useForkRef } from '@salutejs/plasma-core';
 import { useIsomorphicLayoutEffect } from '@salutejs/plasma-core';
-import { usePopupBaseContext } from '@salutejs/plasma-core';
 import { useResizeObserver } from '@salutejs/plasma-core';
 import { useToast } from '@salutejs/plasma-core';
 import { View } from '@salutejs/plasma-core';
@@ -684,10 +667,6 @@ export interface ElasticGridProps {
     minColWidth: number;
 }
 
-export { endAnimationClass }
-
-export { endTransitionClass }
-
 export { extractTextFrom }
 
 // @public (undocumented)
@@ -913,18 +892,6 @@ export type MediaQueryFunction = (content: FlattenSimpleInterpolation | string)
 // @public
 export const Modal: FC<ModalProps>;
 
-export { ModalBase }
-
-export { modalBaseOverlayClass }
-
-export { ModalBaseProps }
-
-export { ModalBaseRootProps }
-
-export { ModalOverlay }
-
-export { ModalOverlayProps }
-
 // @public (undocumented)
 export interface ModalProps extends ModalViewProps {
     closeOnEsc?: boolean;
@@ -1015,24 +982,8 @@ export type Placement = BasePlacement | VariationPlacement;
 
 export { Popup }
 
-export { PopupBase }
-
-export { PopupBasePlacement }
-
-export { PopupBaseProps }
-
-export { PopupBaseProvider }
-
-export { popupBaseRootClass }
-
-export { PopupContextType }
-
-export { PopupInfo }
-
 export { PopupProps }
 
-export { PopupRootProps }
-
 // @public
 export const PreviewGallery: FC<PreviewGalleryProps & HTMLAttributes<HTMLDivElement> & SortableContainerProps>;
 
@@ -1370,8 +1321,6 @@ export { useForkRef }
 
 export { useIsomorphicLayoutEffect }
 
-export { usePopupBaseContext }
-
 export { useResizeObserver }
 
 export { useToast }
diff --git a/packages/plasma-hope/src/components/ModalBase/index.ts b/packages/plasma-hope/src/components/ModalBase/index.ts
deleted file mode 100644
index 114682f489..0000000000
--- a/packages/plasma-hope/src/components/ModalBase/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { ModalBase, ModalOverlay, modalBaseOverlayClass } from '@salutejs/plasma-core';
-export type { ModalBaseProps, ModalBaseRootProps, ModalOverlayProps } from '@salutejs/plasma-core';
diff --git a/packages/plasma-hope/src/components/PopupBase/index.ts b/packages/plasma-hope/src/components/PopupBase/index.ts
deleted file mode 100644
index 5b09a2df4d..0000000000
--- a/packages/plasma-hope/src/components/PopupBase/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export {
-    PopupBaseProvider,
-    usePopupBaseContext,
-    PopupBase,
-    popupBaseRootClass,
-    endAnimationClass,
-    endTransitionClass,
-} from '@salutejs/plasma-core';
-
-export type {
-    PopupBasePlacement,
-    PopupInfo,
-    PopupContextType,
-    PopupBaseProps,
-    PopupRootProps,
-} from '@salutejs/plasma-core';
diff --git a/packages/plasma-hope/src/index.ts b/packages/plasma-hope/src/index.ts
index 647ca03d56..7c2070fed5 100644
--- a/packages/plasma-hope/src/index.ts
+++ b/packages/plasma-hope/src/index.ts
@@ -12,11 +12,9 @@ export * from './components/Grid';
 export * from './components/Image';
 export * from './components/List';
 export * from './components/Modal';
-export * from './components/ModalBase';
 export * from './components/Notification';
 export * from './components/PaginationDots';
 export * from './components/Popup';
-export * from './components/PopupBase';
 export * from './components/Price';
 export * from './components/Progress';
 export * from './components/PreviewGallery';
diff --git a/packages/plasma-new-hope/src/components/Modal/index.ts b/packages/plasma-new-hope/src/components/Modal/index.ts
index 7ee88d168a..a035d55f7e 100644
--- a/packages/plasma-new-hope/src/components/Modal/index.ts
+++ b/packages/plasma-new-hope/src/components/Modal/index.ts
@@ -1,4 +1,2 @@
 export { modalConfig, modalRoot } from './Modal';
-export { classes as modalClasses } from './Modal.tokens'
-
-export type { ModalProps } from './Modal.types';
+export { classes as modalClasses } from './Modal.tokens';
diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Modal/Modal.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Modal/Modal.stories.tsx
index ac5a5f10d1..56353f280d 100644
--- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Modal/Modal.stories.tsx
+++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Modal/Modal.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from '@linaria/react';
 import { Story, Meta } from '@storybook/react';
 import { SSRProvider } from '@salutejs/plasma-core';
 
diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Modal/Modal.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/Modal/Modal.stories.tsx
index 6d4d9b92b5..b2de5ddbe5 100644
--- a/packages/plasma-new-hope/src/examples/plasma_web/components/Modal/Modal.stories.tsx
+++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Modal/Modal.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from '@linaria/react';
 import { Story, Meta } from '@storybook/react';
 import { SSRProvider } from '@salutejs/plasma-core';
 
diff --git a/packages/plasma-new-hope/src/examples/sds_engineer/components/Modal/Modal.stories.tsx b/packages/plasma-new-hope/src/examples/sds_engineer/components/Modal/Modal.stories.tsx
index b660096305..d7ebeab30f 100644
--- a/packages/plasma-new-hope/src/examples/sds_engineer/components/Modal/Modal.stories.tsx
+++ b/packages/plasma-new-hope/src/examples/sds_engineer/components/Modal/Modal.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from '@linaria/react';
 import { Story, Meta } from '@storybook/react';
 import { SSRProvider } from '@salutejs/plasma-core';
 
diff --git a/packages/plasma-new-hope/src/index.ts b/packages/plasma-new-hope/src/index.ts
index 2324acbf86..9a53abf31d 100644
--- a/packages/plasma-new-hope/src/index.ts
+++ b/packages/plasma-new-hope/src/index.ts
@@ -8,3 +8,7 @@ export * from './components/Checkbox';
 export * from './components/Radiobox';
 export * from './components/Popover';
 export * from './components/Tabs';
+export * from './components/Popup';
+export * from './components/Popup/Popup.types';
+export * from './components/Modal';
+export * from './components/Modal/Modal.types';
diff --git a/packages/plasma-web/api/plasma-web.api.md b/packages/plasma-web/api/plasma-web.api.md
index 2f7a5a220f..dd98daf98d 100644
--- a/packages/plasma-web/api/plasma-web.api.md
+++ b/packages/plasma-web/api/plasma-web.api.md
@@ -111,8 +111,6 @@ import { Editable } from '@salutejs/plasma-hope';
 import { EditableProps } from '@salutejs/plasma-hope';
 import { ElasticGrid } from '@salutejs/plasma-hope';
 import { ElasticGridProps } from '@salutejs/plasma-hope';
-import { endAnimationClass } from '@salutejs/plasma-hope';
-import { endTransitionClass } from '@salutejs/plasma-hope';
 import { extractTextFrom } from '@salutejs/plasma-core';
 import { Filter } from '@salutejs/plasma-new-hope/types/engines/types';
 import { FocusProps } from '@salutejs/plasma-core';
@@ -150,12 +148,8 @@ import { MaxLinesProps } from '@salutejs/plasma-core';
 import { mediaQuery } from '@salutejs/plasma-hope';
 import { MediaQueryFunction } from '@salutejs/plasma-hope';
 import { Modal } 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';
-import { ModalOverlayProps } from '@salutejs/plasma-hope';
+import { modalClasses as modalBaseClasses } from '@salutejs/plasma-new-hope/styled-components';
+import { ModalProps as ModalBaseProps } from '@salutejs/plasma-new-hope/styled-components';
 import { ModalProps } from '@salutejs/plasma-hope';
 import { ModalsProvider } from '@salutejs/plasma-hope';
 import { ModalView } from '@salutejs/plasma-hope';
@@ -181,15 +175,13 @@ import { PopoverPlacement } from '@salutejs/plasma-new-hope';
 import { PopoverProps } from '@salutejs/plasma-new-hope';
 import { PopoverTrigger } from '@salutejs/plasma-new-hope';
 import { Popup } from '@salutejs/plasma-hope';
-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 { popupClasses as popupBaseClasses } from '@salutejs/plasma-new-hope/styled-components';
+import { PopupPlacement as PopupBasePlacement } from '@salutejs/plasma-new-hope/styled-components';
+import { PopupProps as PopupBaseProps } from '@salutejs/plasma-new-hope/styled-components';
+import { PopupProvider as PopupBaseProvider } from '@salutejs/plasma-new-hope/styled-components';
+import { PopupInfo } from '@salutejs/plasma-new-hope/styled-components';
 import { PopupProps } from '@salutejs/plasma-hope';
-import { PopupRootProps } from '@salutejs/plasma-hope';
+import { PopupProps as PopupProps_2 } from '@salutejs/plasma-new-hope';
 import { PreviewGallery } from '@salutejs/plasma-hope';
 import { PreviewGalleryItemProps } from '@salutejs/plasma-hope';
 import { PreviewGalleryProps } from '@salutejs/plasma-hope';
@@ -275,7 +267,7 @@ import { useDebouncedFunction } from '@salutejs/plasma-core';
 import { useFocusTrap } from '@salutejs/plasma-hope';
 import { useForkRef } from '@salutejs/plasma-core';
 import { useIsomorphicLayoutEffect } from '@salutejs/plasma-core';
-import { usePopupBaseContext } from '@salutejs/plasma-hope';
+import { usePopupContext as usePopupBaseContext } from '@salutejs/plasma-new-hope/styled-components';
 import { useToast } from '@salutejs/plasma-hope';
 import { ValidationResult } from '@salutejs/plasma-hope';
 import { Variant } from '@salutejs/plasma-new-hope';
@@ -531,10 +523,6 @@ export { ElasticGrid }
 
 export { ElasticGridProps }
 
-export { endAnimationClass }
-
-export { endTransitionClass }
-
 export { extractTextFrom }
 
 export { FocusProps }
@@ -612,18 +600,13 @@ export { MediaQueryFunction }
 
 export { Modal }
 
-export { ModalBase }
+// @public
+export const ModalBase: ForwardRefExoticComponent<ModalBaseProps & RefAttributes<HTMLDivElement>>;
 
-export { modalBaseOverlayClass }
+export { modalBaseClasses }
 
 export { ModalBaseProps }
 
-export { ModalBaseRootProps }
-
-export { ModalOverlay }
-
-export { ModalOverlayProps }
-
 export { ModalProps }
 
 export { ModalsProvider }
@@ -677,7 +660,10 @@ export { PopoverTrigger }
 
 export { Popup }
 
-export { PopupBase }
+// @public
+export const PopupBase: FunctionComponent<PropsType<Record<string, Variant>> & PopupProps_2 & RefAttributes<HTMLDivElement>>;
+
+export { popupBaseClasses }
 
 export { PopupBasePlacement }
 
@@ -685,16 +671,10 @@ export { PopupBaseProps }
 
 export { PopupBaseProvider }
 
-export { popupBaseRootClass }
-
-export { PopupContextType }
-
 export { PopupInfo }
 
 export { PopupProps }
 
-export { PopupRootProps }
-
 export { PreviewGallery }
 
 export { PreviewGalleryItemProps }
@@ -756,13 +736,13 @@ export const Select: React_2.ForwardRefExoticComponent<({
 } & {
     value: any;
     onChange?: ((value: any) => void) | undefined;
-} & Pick<SelectViewProps, "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "autoFocus" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "status" | "helperText" | "items" | "onItemSelect" | "isOpen"> & DropdownListCssProperties & React_2.RefAttributes<HTMLButtonElement>) | ({
+} & Pick<SelectViewProps, "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "autoFocus" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "status" | "isOpen" | "helperText" | "items" | "onItemSelect"> & DropdownListCssProperties & React_2.RefAttributes<HTMLButtonElement>) | ({
     multiselect?: true | undefined;
     separator?: string | undefined;
 } & {
     value: any;
     onChange?: ((value: any) => void) | undefined;
-} & Pick<SelectViewProps, "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "autoFocus" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "status" | "helperText" | "items" | "onItemSelect" | "isOpen"> & DropdownListCssProperties & React_2.RefAttributes<HTMLButtonElement>)>;
+} & Pick<SelectViewProps, "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "autoFocus" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "status" | "isOpen" | "helperText" | "items" | "onItemSelect"> & DropdownListCssProperties & React_2.RefAttributes<HTMLButtonElement>)>;
 
 export { SelectGroup }
 
diff --git a/packages/plasma-web/src/components/ModalBase/Modal.config.ts b/packages/plasma-web/src/components/ModalBase/Modal.config.ts
new file mode 100644
index 0000000000..2fe022abfd
--- /dev/null
+++ b/packages/plasma-web/src/components/ModalBase/Modal.config.ts
@@ -0,0 +1,15 @@
+import { css } from '@salutejs/plasma-new-hope/styled-components';
+
+export const config = {
+    defaults: {
+        view: 'default',
+    },
+    variations: {
+        view: {
+            default: css`
+                --plasma-modal-overlay-with-blur-color: rgba(35, 35, 35, 0.2);
+                --plasma-modal-overlay-color: rgba(8, 8, 8, 0.56);
+            `,
+        },
+    },
+};
diff --git a/packages/plasma-web/src/components/ModalBase/ModalBase.stories.tsx b/packages/plasma-web/src/components/ModalBase/ModalBase.stories.tsx
index 9fc46492f3..50a0137a06 100644
--- a/packages/plasma-web/src/components/ModalBase/ModalBase.stories.tsx
+++ b/packages/plasma-web/src/components/ModalBase/ModalBase.stories.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
-import styled, { createGlobalStyle } from 'styled-components';
+import styled from 'styled-components';
 import { Story, Meta } from '@storybook/react';
-import { surfaceSolid02, darkOverlayBlur, overlaySoft } from '@salutejs/plasma-tokens-web';
+import { surfaceSolid02 } from '@salutejs/plasma-tokens-web';
 
 import { SSRProvider } from '../SSRProvider';
 import { InSpacingDecorator } from '../../helpers';
 import { Button } from '../Button';
-import { PopupBaseProvider, endAnimationClass, popupBaseRootClass } from '../PopupBase';
+import { PopupBaseProvider, popupBaseClasses } from '../PopupBase';
 
-import { ModalBase, modalBaseOverlayClass } from '.';
+import { ModalBase, modalBaseClasses } from '.';
 
 export default {
     title: 'Controls/ModalBase',
@@ -51,29 +51,21 @@ const StyledWrapper = styled.div`
     height: 1200px;
 `;
 
-// TODO: новый отдельный оверлей #778
-const ModalOverlayVariables = createGlobalStyle`
-    body {
-        --plasma-modal-blur-overlay-color: ${darkOverlayBlur};
-        --plasma-modal-overlay-color: ${overlaySoft};
-    }
-`;
-
 const Content = styled.div`
     background: ${surfaceSolid02};
     padding: 1rem;
 `;
 
 const StyledModal = styled(ModalBase)`
-    && > .${popupBaseRootClass}, .${modalBaseOverlayClass} {
+    && > .${popupBaseClasses.root}, .${modalBaseClasses.overlay} {
         animation: fadeIn 1s forwards;
     }
 
-    &&.${endAnimationClass} > .${popupBaseRootClass} {
+    &&.${popupBaseClasses.endAnimation} .${popupBaseClasses.root} {
         animation: fadeOut 1s forwards;
     }
 
-    &&.${endAnimationClass} > .${modalBaseOverlayClass} {
+    &&.${popupBaseClasses.endAnimation} .${modalBaseClasses.overlay} {
         animation: fadeOut 1s forwards;
     }
 
@@ -106,7 +98,6 @@ export const ModalBaseDemo: Story<ModalBaseStoryProps> = ({ placement, offsetX,
     return (
         <SSRProvider>
             <StyledWrapper>
-                <ModalOverlayVariables />
                 <PopupBaseProvider>
                     <div style={{ display: 'flex', flexDirection: 'column' }}>
                         <StyledButton text="Открыть A" onClick={() => setIsOpenA(true)} />
diff --git a/packages/plasma-web/src/components/ModalBase/ModalBase.tsx b/packages/plasma-web/src/components/ModalBase/ModalBase.tsx
new file mode 100644
index 0000000000..e78fb8d97e
--- /dev/null
+++ b/packages/plasma-web/src/components/ModalBase/ModalBase.tsx
@@ -0,0 +1,14 @@
+import { modalConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+import type { ModalProps } from '@salutejs/plasma-new-hope/styled-components';
+
+import { config } from './Modal.config';
+
+const mergedConfig = mergeConfig(modalConfig, config);
+const ModalBaseComponent = component(mergedConfig) as React.ForwardRefExoticComponent<
+    ModalProps & React.RefAttributes<HTMLDivElement>
+>;
+
+/**
+ * Модальное окно.
+ */
+export const ModalBase = ModalBaseComponent;
diff --git a/packages/plasma-web/src/components/ModalBase/index.ts b/packages/plasma-web/src/components/ModalBase/index.ts
index ec30828578..57277868ac 100644
--- a/packages/plasma-web/src/components/ModalBase/index.ts
+++ b/packages/plasma-web/src/components/ModalBase/index.ts
@@ -1,2 +1,4 @@
-export { ModalBase, ModalOverlay, modalBaseOverlayClass } from '@salutejs/plasma-hope';
-export type { ModalBaseProps, ModalBaseRootProps, ModalOverlayProps } from '@salutejs/plasma-hope';
+export { ModalBase } from './ModalBase';
+export { modalClasses as modalBaseClasses } from '@salutejs/plasma-new-hope/styled-components';
+
+export type { ModalProps as ModalBaseProps } from '@salutejs/plasma-new-hope/styled-components';
diff --git a/packages/plasma-web/src/components/PopupBase/PopupBase.stories.tsx b/packages/plasma-web/src/components/PopupBase/PopupBase.stories.tsx
index 0f03585764..9a1cabb5ab 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, endAnimationClass, endTransitionClass, popupBaseRootClass } from '.';
+import { PopupBase, popupBaseClasses, PopupBaseProvider } from '.';
 
 export default {
     title: 'Controls/PopupBase',
@@ -65,11 +65,11 @@ const Content = styled.div`
 `;
 
 const StyledPopupAnimation = styled(PopupBase)`
-    && > .${popupBaseRootClass} {
+    && .${popupBaseClasses.root} {
         animation: fadeIn 1s forwards;
     }
 
-    &&.${endAnimationClass} > .${popupBaseRootClass} {
+    &&.${popupBaseClasses.endAnimation} .${popupBaseClasses.root} {
         animation: fadeOut 1s forwards;
     }
 
@@ -95,12 +95,12 @@ const StyledPopupAnimation = styled(PopupBase)`
 `;
 
 const StyledPopupTransition = styled(PopupBase)`
-    && > .${popupBaseRootClass} {
+    && .${popupBaseClasses.root} {
         opacity: 1;
         transition: opacity 0.5s 0.1s;
     }
 
-    &&.${endTransitionClass} > .${popupBaseRootClass} {
+    &&.${popupBaseClasses.endTransition} .${popupBaseClasses.root} {
         opacity: 0;
         transition: opacity 0.5s 0.1s;
     }
diff --git a/packages/plasma-web/src/components/PopupBase/PopupBase.tsx b/packages/plasma-web/src/components/PopupBase/PopupBase.tsx
new file mode 100644
index 0000000000..5c101eaa82
--- /dev/null
+++ b/packages/plasma-web/src/components/PopupBase/PopupBase.tsx
@@ -0,0 +1,8 @@
+import { popupConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
+
+const mergedConfig = mergeConfig(popupConfig);
+
+/**
+ * Базовый компонент PopupBase.
+ */
+export const PopupBase = component(mergedConfig);
diff --git a/packages/plasma-web/src/components/PopupBase/index.ts b/packages/plasma-web/src/components/PopupBase/index.ts
index 65596fbf1f..5b0fd07f15 100644
--- a/packages/plasma-web/src/components/PopupBase/index.ts
+++ b/packages/plasma-web/src/components/PopupBase/index.ts
@@ -1,16 +1,13 @@
 export {
-    PopupBaseProvider,
-    usePopupBaseContext,
-    PopupBase,
-    popupBaseRootClass,
-    endAnimationClass,
-    endTransitionClass,
-} from '@salutejs/plasma-hope';
+    usePopupContext as usePopupBaseContext,
+    PopupProvider as PopupBaseProvider,
+    popupClasses as popupBaseClasses,
+} from '@salutejs/plasma-new-hope/styled-components';
+
+export { PopupBase } from './PopupBase';
 
 export type {
-    PopupBasePlacement,
+    PopupPlacement as PopupBasePlacement,
     PopupInfo,
-    PopupContextType,
-    PopupBaseProps,
-    PopupRootProps,
-} from '@salutejs/plasma-hope';
+    PopupProps as PopupBaseProps,
+} from '@salutejs/plasma-new-hope/styled-components';