From 1c57b151dbb73234b6898e292a79d8f9651d151d Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Thu, 21 Nov 2024 17:17:04 +0200
Subject: [PATCH] refactor: internal - changed Modal to LegacyModal (exported
 still as Modal) 7360977361

---
 .../LegacyModal.module.scss}                  |  0
 .../Modal.tsx => LegacyModal/LegacyModal.tsx} | 14 +++++++-------
 .../LegacyModal.types.ts}                     |  0
 .../LegacyModalContent.module.scss}           |  0
 .../LegacyModalContent.tsx}                   | 10 +++++-----
 .../LegacyModalContent.snapshot.test.tsx}     |  2 +-
 ...LegacyModalContent.snapshot.test.tsx.snap} |  0
 .../LegacyModalFooter.module.scss}            |  0
 .../LegacyModalFooter/LegacyModalFooter.tsx}  | 10 +++++-----
 .../LegacyModalFooterButtons.tsx}             | 18 +++++++++++-------
 ...egacyModalFooterButtons.snapshot.test.tsx} |  2 +-
 .../LegacyModalFooterButtons.test.tsx}        |  4 +++-
 ...ModalFooterButtons.snapshot.test.tsx.snap} |  0
 .../LegacyModalFooter.snapshot.test.js}       |  2 +-
 .../LegacyModalFooter.snapshot.test.js.snap}  |  0
 .../LegacyModalHeader.module.scss}            |  0
 .../LegacyModalHeader/LegacyModalHeader.tsx}  | 16 ++++++++--------
 .../LegacyModalHeader.snapshot.test.js}       |  2 +-
 .../LegacyModalHeader.snapshot.test.js.snap}  |  0
 .../{Modal => LegacyModal}/ModalHelper.ts     |  8 ++++----
 .../__stories__/LegacyModal.mdx}              | 12 ++++++++----
 .../LegacyModal.stories.helpers.tsx}          |  6 +++---
 .../LegacyModal.stories.module.scss}          |  0
 .../__stories__/LegacyModal.stories.tsx}      | 12 ++++++------
 .../__tests__/LegacyModal.snapshot.test.js}   |  2 +-
 .../__tests__/LegacyModal.test.js}            |  2 +-
 .../LegacyModal.snapshot.test.js.snap}        |  0
 .../{Modal => LegacyModal}/a11yDialog.ts      |  0
 .../core/src/components/LegacyModal/index.ts  | 19 +++++++++++++++++++
 .../useAnimationProps.ts                      |  0
 .../useBodyScrollLock.ts                      |  0
 .../useShowHideModal.ts                       |  0
 packages/core/src/components/Modal/index.ts   | 10 ----------
 packages/core/src/components/index.ts         |  2 +-
 .../dropdown-in-modals.stories.tsx            | 16 ++++++++--------
 .../core/webpack/published-ts-components.js   |  0
 36 files changed, 94 insertions(+), 75 deletions(-)
 rename packages/core/src/components/{Modal/Modal.module.scss => LegacyModal/LegacyModal.module.scss} (100%)
 rename packages/core/src/components/{Modal/Modal.tsx => LegacyModal/LegacyModal.tsx} (93%)
 rename packages/core/src/components/{Modal/Modal.types.ts => LegacyModal/LegacyModal.types.ts} (100%)
 rename packages/core/src/components/{Modal/ModalContent/ModalContent.module.scss => LegacyModal/LegacyModalContent/LegacyModalContent.module.scss} (100%)
 rename packages/core/src/components/{Modal/ModalContent/ModalContent.tsx => LegacyModal/LegacyModalContent/LegacyModalContent.tsx} (67%)
 rename packages/core/src/components/{Modal/ModalContent/__tests__/ModalContent.snapshot.test.tsx => LegacyModal/LegacyModalContent/__tests__/LegacyModalContent.snapshot.test.tsx} (90%)
 rename packages/core/src/components/{Modal/ModalContent/__tests__/__snapshots__/ModalContent.snapshot.test.tsx.snap => LegacyModal/LegacyModalContent/__tests__/__snapshots__/LegacyModalContent.snapshot.test.tsx.snap} (100%)
 rename packages/core/src/components/{Modal/ModalFooter/ModalFooter.module.scss => LegacyModal/LegacyModalFooter/LegacyModalFooter.module.scss} (100%)
 rename packages/core/src/components/{Modal/ModalFooter/ModalFooter.tsx => LegacyModal/LegacyModalFooter/LegacyModalFooter.tsx} (53%)
 rename packages/core/src/components/{Modal/ModalFooter/ModalFooterButtons/ModalFooterButtons.tsx => LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons.tsx} (76%)
 rename packages/core/src/components/{Modal/ModalFooter/ModalFooterButtons/__tests__/ModalFooterButtons.snapshot.test.tsx => LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/LegacyModalFooterButtons.snapshot.test.tsx} (92%)
 rename packages/core/src/components/{Modal/ModalFooter/ModalFooterButtons/__tests__/ModalFooterButtons.test.tsx => LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/LegacyModalFooterButtons.test.tsx} (94%)
 rename packages/core/src/components/{Modal/ModalFooter/ModalFooterButtons/__tests__/__snapshots__/ModalFooterButtons.snapshot.test.tsx.snap => LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/__snapshots__/LegacyModalFooterButtons.snapshot.test.tsx.snap} (100%)
 rename packages/core/src/components/{Modal/ModalFooter/__tests__/ModalFooter.snapshot.test.js => LegacyModal/LegacyModalFooter/__tests__/LegacyModalFooter.snapshot.test.js} (94%)
 rename packages/core/src/components/{Modal/ModalFooter/__tests__/__snapshots__/ModalFooter.snapshot.test.js.snap => LegacyModal/LegacyModalFooter/__tests__/__snapshots__/LegacyModalFooter.snapshot.test.js.snap} (100%)
 rename packages/core/src/components/{Modal/ModalHeader/ModalHeader.module.scss => LegacyModal/LegacyModalHeader/LegacyModalHeader.module.scss} (100%)
 rename packages/core/src/components/{Modal/ModalHeader/ModalHeader.tsx => LegacyModal/LegacyModalHeader/LegacyModalHeader.tsx} (86%)
 rename packages/core/src/components/{Modal/ModalHeader/__tests__/ModalHeader.snapshot.test.js => LegacyModal/LegacyModalHeader/__tests__/LegacyModalHeader.snapshot.test.js} (96%)
 rename packages/core/src/components/{Modal/ModalHeader/__tests__/__snapshots__/ModalHeader.snapshot.test.js.snap => LegacyModal/LegacyModalHeader/__tests__/__snapshots__/LegacyModalHeader.snapshot.test.js.snap} (100%)
 rename packages/core/src/components/{Modal => LegacyModal}/ModalHelper.ts (74%)
 rename packages/core/src/components/{Modal/__stories__/Modal.mdx => LegacyModal/__stories__/LegacyModal.mdx} (86%)
 rename packages/core/src/components/{Modal/__stories__/Modal.stories.helpers.tsx => LegacyModal/__stories__/LegacyModal.stories.helpers.tsx} (95%)
 rename packages/core/src/components/{Modal/__stories__/Modal.stories.module.scss => LegacyModal/__stories__/LegacyModal.stories.module.scss} (100%)
 rename packages/core/src/components/{Modal/__stories__/Modal.stories.tsx => LegacyModal/__stories__/LegacyModal.stories.tsx} (95%)
 rename packages/core/src/components/{Modal/__tests__/Modal.snapshot.test.js => LegacyModal/__tests__/LegacyModal.snapshot.test.js} (98%)
 rename packages/core/src/components/{Modal/__tests__/Modal.test.js => LegacyModal/__tests__/LegacyModal.test.js} (98%)
 rename packages/core/src/components/{Modal/__tests__/__snapshots__/Modal.snapshot.test.js.snap => LegacyModal/__tests__/__snapshots__/LegacyModal.snapshot.test.js.snap} (100%)
 rename packages/core/src/components/{Modal => LegacyModal}/a11yDialog.ts (100%)
 create mode 100644 packages/core/src/components/LegacyModal/index.ts
 rename packages/core/src/components/{Modal => LegacyModal}/useAnimationProps.ts (100%)
 rename packages/core/src/components/{Modal => LegacyModal}/useBodyScrollLock.ts (100%)
 rename packages/core/src/components/{Modal => LegacyModal}/useShowHideModal.ts (100%)
 delete mode 100644 packages/core/src/components/Modal/index.ts
 delete mode 100644 packages/core/webpack/published-ts-components.js

diff --git a/packages/core/src/components/Modal/Modal.module.scss b/packages/core/src/components/LegacyModal/LegacyModal.module.scss
similarity index 100%
rename from packages/core/src/components/Modal/Modal.module.scss
rename to packages/core/src/components/LegacyModal/LegacyModal.module.scss
diff --git a/packages/core/src/components/Modal/Modal.tsx b/packages/core/src/components/LegacyModal/LegacyModal.tsx
similarity index 93%
rename from packages/core/src/components/Modal/Modal.tsx
rename to packages/core/src/components/LegacyModal/LegacyModal.tsx
index 5a8a6e2023..2c53766dfc 100644
--- a/packages/core/src/components/Modal/Modal.tsx
+++ b/packages/core/src/components/LegacyModal/LegacyModal.tsx
@@ -2,8 +2,8 @@ import React, { cloneElement, FC, ReactElement, useCallback, useMemo } from "rea
 import ReactDOM from "react-dom";
 import cx from "classnames";
 import { useA11yDialog } from "./a11yDialog";
-import ModalContent from "./ModalContent/ModalContent";
-import ModalHeader from "./ModalHeader/ModalHeader";
+import ModalContent from "./LegacyModalContent/LegacyModalContent";
+import ModalHeader from "./LegacyModalHeader/LegacyModalHeader";
 import useBodyScrollLock from "./useBodyScrollLock";
 import useShowHideModal from "./useShowHideModal";
 import {
@@ -17,12 +17,12 @@ import { NOOP } from "../../utils/function-utils";
 import { withStaticProps } from "../../types";
 import { getTestId } from "../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../tests/constants";
-import styles from "./Modal.module.scss";
-import { ModalWidth } from "./Modal.types";
+import styles from "./LegacyModal.module.scss";
+import { ModalWidth } from "./LegacyModal.types";
 import LayerProvider from "../LayerProvider/LayerProvider";
 import { isClient } from "../../utils/ssr-utils";
 
-export interface ModalProps {
+export interface LegacyModalProps {
   /**
    * Id of the modal, used internally and for accessibility
    */
@@ -87,7 +87,7 @@ export interface ModalProps {
   unmountOnClose?: boolean;
 }
 
-const Modal: FC<ModalProps> & { width?: typeof ModalWidthEnum } = ({
+const Modal: FC<LegacyModalProps> & { width?: typeof ModalWidthEnum } = ({
   classNames = { container: "", overlay: "", modal: "" },
   id,
   show,
@@ -103,7 +103,7 @@ const Modal: FC<ModalProps> & { width?: typeof ModalWidthEnum } = ({
   zIndex = 10000,
   unmountOnClose = true,
   "data-testid": dataTestId
-}: ModalProps) => {
+}: LegacyModalProps) => {
   const childrenArray: ReactElement[] = useMemo(
     () => (children ? (React.Children.toArray(children) as ReactElement[]) : []),
     [children]
diff --git a/packages/core/src/components/Modal/Modal.types.ts b/packages/core/src/components/LegacyModal/LegacyModal.types.ts
similarity index 100%
rename from packages/core/src/components/Modal/Modal.types.ts
rename to packages/core/src/components/LegacyModal/LegacyModal.types.ts
diff --git a/packages/core/src/components/Modal/ModalContent/ModalContent.module.scss b/packages/core/src/components/LegacyModal/LegacyModalContent/LegacyModalContent.module.scss
similarity index 100%
rename from packages/core/src/components/Modal/ModalContent/ModalContent.module.scss
rename to packages/core/src/components/LegacyModal/LegacyModalContent/LegacyModalContent.module.scss
diff --git a/packages/core/src/components/Modal/ModalContent/ModalContent.tsx b/packages/core/src/components/LegacyModal/LegacyModalContent/LegacyModalContent.tsx
similarity index 67%
rename from packages/core/src/components/Modal/ModalContent/ModalContent.tsx
rename to packages/core/src/components/LegacyModal/LegacyModalContent/LegacyModalContent.tsx
index 42e200fdc1..ff033f01d2 100644
--- a/packages/core/src/components/Modal/ModalContent/ModalContent.tsx
+++ b/packages/core/src/components/LegacyModal/LegacyModalContent/LegacyModalContent.tsx
@@ -4,13 +4,13 @@ import Text from "../../Text/Text";
 import VibeComponentProps from "../../../types/VibeComponentProps";
 import { getTestId } from "../../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../../tests/constants";
-import styles from "./ModalContent.module.scss";
+import styles from "./LegacyModalContent.module.scss";
 
-export interface ModalContentProps extends VibeComponentProps {
+export interface LegacyModalContentProps extends VibeComponentProps {
   children: ReactElement | ReactElement[] | string;
 }
 
-const ModalContent: FC<ModalContentProps> = ({ className, id, "data-testid": dataTestId, children }) => {
+const LegacyModalContent: FC<LegacyModalContentProps> = ({ className, id, "data-testid": dataTestId, children }) => {
   return (
     <Text
       type="text1"
@@ -24,8 +24,8 @@ const ModalContent: FC<ModalContentProps> = ({ className, id, "data-testid": dat
   );
 };
 
-Object.assign(ModalContent, {
+Object.assign(LegacyModalContent, {
   displayName: "ModalContent"
 });
 
-export default ModalContent;
+export default LegacyModalContent;
diff --git a/packages/core/src/components/Modal/ModalContent/__tests__/ModalContent.snapshot.test.tsx b/packages/core/src/components/LegacyModal/LegacyModalContent/__tests__/LegacyModalContent.snapshot.test.tsx
similarity index 90%
rename from packages/core/src/components/Modal/ModalContent/__tests__/ModalContent.snapshot.test.tsx
rename to packages/core/src/components/LegacyModal/LegacyModalContent/__tests__/LegacyModalContent.snapshot.test.tsx
index 440811693e..2cc972d081 100644
--- a/packages/core/src/components/Modal/ModalContent/__tests__/ModalContent.snapshot.test.tsx
+++ b/packages/core/src/components/LegacyModal/LegacyModalContent/__tests__/LegacyModalContent.snapshot.test.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import renderer from "react-test-renderer";
-import ModalContent from "../ModalContent";
+import ModalContent from "../LegacyModalContent";
 
 describe("ModalContent renders correctly", () => {
   it("with empty props", () => {
diff --git a/packages/core/src/components/Modal/ModalContent/__tests__/__snapshots__/ModalContent.snapshot.test.tsx.snap b/packages/core/src/components/LegacyModal/LegacyModalContent/__tests__/__snapshots__/LegacyModalContent.snapshot.test.tsx.snap
similarity index 100%
rename from packages/core/src/components/Modal/ModalContent/__tests__/__snapshots__/ModalContent.snapshot.test.tsx.snap
rename to packages/core/src/components/LegacyModal/LegacyModalContent/__tests__/__snapshots__/LegacyModalContent.snapshot.test.tsx.snap
diff --git a/packages/core/src/components/Modal/ModalFooter/ModalFooter.module.scss b/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooter.module.scss
similarity index 100%
rename from packages/core/src/components/Modal/ModalFooter/ModalFooter.module.scss
rename to packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooter.module.scss
diff --git a/packages/core/src/components/Modal/ModalFooter/ModalFooter.tsx b/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooter.tsx
similarity index 53%
rename from packages/core/src/components/Modal/ModalFooter/ModalFooter.tsx
rename to packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooter.tsx
index b677bc2717..b83cfaeb40 100644
--- a/packages/core/src/components/Modal/ModalFooter/ModalFooter.tsx
+++ b/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooter.tsx
@@ -1,18 +1,18 @@
 import React, { FC, ReactElement } from "react";
 import cx from "classnames";
 import VibeComponentProps from "../../../types/VibeComponentProps";
-import styles from "./ModalFooter.module.scss";
+import styles from "./LegacyModalFooter.module.scss";
 
-export interface ModalFooterProps extends VibeComponentProps {
+export interface LegacyModalFooterProps extends VibeComponentProps {
   children: ReactElement | ReactElement[] | string;
 }
 
-const ModalFooter: FC<ModalFooterProps> = ({ className, children }) => {
+const LegacyModalFooter: FC<LegacyModalFooterProps> = ({ className, children }) => {
   return <div className={cx(styles.container, className)}>{children}</div>;
 };
 
-Object.assign(ModalFooter, {
+Object.assign(LegacyModalFooter, {
   displayName: "ModalFooter"
 });
 
-export default ModalFooter;
+export default LegacyModalFooter;
diff --git a/packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/ModalFooterButtons.tsx b/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons.tsx
similarity index 76%
rename from packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/ModalFooterButtons.tsx
rename to packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons.tsx
index 247e221fd8..6b860f034b 100644
--- a/packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/ModalFooterButtons.tsx
+++ b/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons.tsx
@@ -5,9 +5,9 @@ import { getTestId } from "../../../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../../../tests/constants";
 import Flex from "../../../Flex/Flex";
 import Button from "../../../Button/Button";
-import ModalFooter from "../ModalFooter";
+import LegacyModalFooter from "../LegacyModalFooter";
 
-export interface ModalFooterButtonsProps extends VibeComponentProps {
+export interface LegacyModalFooterButtonsProps extends VibeComponentProps {
   primaryButtonText: string;
   secondaryButtonText?: string;
   disablePrimaryButton?: boolean;
@@ -15,7 +15,7 @@ export interface ModalFooterButtonsProps extends VibeComponentProps {
   onSecondaryButtonClick?: () => void;
 }
 
-const ModalFooterButtons: VibeComponent<ModalFooterButtonsProps> = forwardRef(
+const LegacyModalFooterButtons: VibeComponent<LegacyModalFooterButtonsProps> = forwardRef(
   (
     {
       primaryButtonText,
@@ -26,13 +26,13 @@ const ModalFooterButtons: VibeComponent<ModalFooterButtonsProps> = forwardRef(
       className,
       id,
       "data-testid": dataTestId
-    }: ModalFooterButtonsProps,
+    }: LegacyModalFooterButtonsProps,
     // As ModalFooter does not currently forward refs
     // eslint-disable-next-line
     ref
   ) => {
     return (
-      <ModalFooter
+      <LegacyModalFooter
         id={id}
         className={className}
         data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_FOOTER_BUTTONS, id)}
@@ -47,9 +47,13 @@ const ModalFooterButtons: VibeComponent<ModalFooterButtonsProps> = forwardRef(
             {primaryButtonText}
           </Button>
         </Flex>
-      </ModalFooter>
+      </LegacyModalFooter>
     );
   }
 );
 
-export default ModalFooterButtons;
+Object.assign(LegacyModalFooterButtons, {
+  displayName: "ModalFooterButtons"
+});
+
+export default LegacyModalFooterButtons;
diff --git a/packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/__tests__/ModalFooterButtons.snapshot.test.tsx b/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/LegacyModalFooterButtons.snapshot.test.tsx
similarity index 92%
rename from packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/__tests__/ModalFooterButtons.snapshot.test.tsx
rename to packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/LegacyModalFooterButtons.snapshot.test.tsx
index 3d521b9804..5d0434e1b3 100644
--- a/packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/__tests__/ModalFooterButtons.snapshot.test.tsx
+++ b/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/LegacyModalFooterButtons.snapshot.test.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import renderer from "react-test-renderer";
-import ModalFooterButtons from "../ModalFooterButtons";
+import ModalFooterButtons from "../LegacyModalFooterButtons";
 
 describe("ModalFooterButtons", () => {
   it("should render correctly", () => {
diff --git a/packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/__tests__/ModalFooterButtons.test.tsx b/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/LegacyModalFooterButtons.test.tsx
similarity index 94%
rename from packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/__tests__/ModalFooterButtons.test.tsx
rename to packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/LegacyModalFooterButtons.test.tsx
index f1ccb6ccf2..3b21797880 100644
--- a/packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/__tests__/ModalFooterButtons.test.tsx
+++ b/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/LegacyModalFooterButtons.test.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 import { fireEvent, render, cleanup } from "@testing-library/react";
-import ModalFooterButtons, { ModalFooterButtonsProps } from "../ModalFooterButtons";
+import ModalFooterButtons, {
+  LegacyModalFooterButtonsProps as ModalFooterButtonsProps
+} from "../LegacyModalFooterButtons";
 
 const PRIMARY_BUTTON_TEXT = "Confirm";
 const SECONDARY_BUTTON_TEXT = "Cancel";
diff --git a/packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/__tests__/__snapshots__/ModalFooterButtons.snapshot.test.tsx.snap b/packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/__snapshots__/LegacyModalFooterButtons.snapshot.test.tsx.snap
similarity index 100%
rename from packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/__tests__/__snapshots__/ModalFooterButtons.snapshot.test.tsx.snap
rename to packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/__snapshots__/LegacyModalFooterButtons.snapshot.test.tsx.snap
diff --git a/packages/core/src/components/Modal/ModalFooter/__tests__/ModalFooter.snapshot.test.js b/packages/core/src/components/LegacyModal/LegacyModalFooter/__tests__/LegacyModalFooter.snapshot.test.js
similarity index 94%
rename from packages/core/src/components/Modal/ModalFooter/__tests__/ModalFooter.snapshot.test.js
rename to packages/core/src/components/LegacyModal/LegacyModalFooter/__tests__/LegacyModalFooter.snapshot.test.js
index 086abd7d59..275aa67e44 100644
--- a/packages/core/src/components/Modal/ModalFooter/__tests__/ModalFooter.snapshot.test.js
+++ b/packages/core/src/components/LegacyModal/LegacyModalFooter/__tests__/LegacyModalFooter.snapshot.test.js
@@ -1,5 +1,5 @@
 import React from "react";
-import ModalFooter from "../ModalFooter";
+import ModalFooter from "../LegacyModalFooter";
 import { cleanup, render } from "@testing-library/react";
 import { snapshotDiff } from "../../../../utils/jest-utils";
 
diff --git a/packages/core/src/components/Modal/ModalFooter/__tests__/__snapshots__/ModalFooter.snapshot.test.js.snap b/packages/core/src/components/LegacyModal/LegacyModalFooter/__tests__/__snapshots__/LegacyModalFooter.snapshot.test.js.snap
similarity index 100%
rename from packages/core/src/components/Modal/ModalFooter/__tests__/__snapshots__/ModalFooter.snapshot.test.js.snap
rename to packages/core/src/components/LegacyModal/LegacyModalFooter/__tests__/__snapshots__/LegacyModalFooter.snapshot.test.js.snap
diff --git a/packages/core/src/components/Modal/ModalHeader/ModalHeader.module.scss b/packages/core/src/components/LegacyModal/LegacyModalHeader/LegacyModalHeader.module.scss
similarity index 100%
rename from packages/core/src/components/Modal/ModalHeader/ModalHeader.module.scss
rename to packages/core/src/components/LegacyModal/LegacyModalHeader/LegacyModalHeader.module.scss
diff --git a/packages/core/src/components/Modal/ModalHeader/ModalHeader.tsx b/packages/core/src/components/LegacyModal/LegacyModalHeader/LegacyModalHeader.tsx
similarity index 86%
rename from packages/core/src/components/Modal/ModalHeader/ModalHeader.tsx
rename to packages/core/src/components/LegacyModal/LegacyModalHeader/LegacyModalHeader.tsx
index 3ab31f4d5d..30a69a47e4 100644
--- a/packages/core/src/components/Modal/ModalHeader/ModalHeader.tsx
+++ b/packages/core/src/components/LegacyModal/LegacyModalHeader/LegacyModalHeader.tsx
@@ -11,10 +11,10 @@ import { ComponentDefaultTestId } from "../../../tests/constants";
 import Text from "../../Text/Text";
 import Heading from "../../Heading/Heading";
 import Flex from "../../Flex/Flex";
-import styles from "./ModalHeader.module.scss";
+import styles from "./LegacyModalHeader.module.scss";
 import { SubIcon } from "../../../types/SubIcon";
 
-interface BaseModalHeaderProps extends VibeComponentProps {
+interface BaseLegacyModalHeaderProps extends VibeComponentProps {
   /**
    * Description of the modal - pure string description is a recommended standard, use JSX ability only if there is a need to add links
    */
@@ -58,19 +58,19 @@ interface BaseModalHeaderProps extends VibeComponentProps {
   closeButtonAriaLabel?: string;
 }
 
-interface ModalHeaderWithOnlyTitle extends BaseModalHeaderProps {
+interface LegacyModalHeaderWithOnlyTitle extends BaseLegacyModalHeaderProps {
   title: ElementContent;
   children?: never;
 }
 
-interface ModalHeaderWithOnlyChildren extends BaseModalHeaderProps {
+interface LegacyModalHeaderWithOnlyChildren extends BaseLegacyModalHeaderProps {
   title?: never;
   children: ElementContent;
 }
 
-export type ModalHeaderProps = ModalHeaderWithOnlyTitle | ModalHeaderWithOnlyChildren;
+export type LegacyModalHeaderProps = LegacyModalHeaderWithOnlyTitle | LegacyModalHeaderWithOnlyChildren;
 
-const ModalHeader: FC<ModalHeaderProps> = ({
+const LegacyModalHeader: FC<LegacyModalHeaderProps> = ({
   className,
   title,
   children,
@@ -128,8 +128,8 @@ const ModalHeader: FC<ModalHeaderProps> = ({
   );
 };
 
-Object.assign(ModalHeader, {
+Object.assign(LegacyModalHeader, {
   displayName: "ModalHeader"
 });
 
-export default ModalHeader;
+export default LegacyModalHeader;
diff --git a/packages/core/src/components/Modal/ModalHeader/__tests__/ModalHeader.snapshot.test.js b/packages/core/src/components/LegacyModal/LegacyModalHeader/__tests__/LegacyModalHeader.snapshot.test.js
similarity index 96%
rename from packages/core/src/components/Modal/ModalHeader/__tests__/ModalHeader.snapshot.test.js
rename to packages/core/src/components/LegacyModal/LegacyModalHeader/__tests__/LegacyModalHeader.snapshot.test.js
index 0fc29e8e13..b31f8325f2 100644
--- a/packages/core/src/components/Modal/ModalHeader/__tests__/ModalHeader.snapshot.test.js
+++ b/packages/core/src/components/LegacyModal/LegacyModalHeader/__tests__/LegacyModalHeader.snapshot.test.js
@@ -1,5 +1,5 @@
 import React from "react";
-import ModalHeader from "../ModalHeader";
+import ModalHeader from "../LegacyModalHeader";
 import { Settings } from "@vibe/icons";
 import { cleanup, render } from "@testing-library/react";
 import { snapshotDiff } from "../../../../utils/jest-utils";
diff --git a/packages/core/src/components/Modal/ModalHeader/__tests__/__snapshots__/ModalHeader.snapshot.test.js.snap b/packages/core/src/components/LegacyModal/LegacyModalHeader/__tests__/__snapshots__/LegacyModalHeader.snapshot.test.js.snap
similarity index 100%
rename from packages/core/src/components/Modal/ModalHeader/__tests__/__snapshots__/ModalHeader.snapshot.test.js.snap
rename to packages/core/src/components/LegacyModal/LegacyModalHeader/__tests__/__snapshots__/LegacyModalHeader.snapshot.test.js.snap
diff --git a/packages/core/src/components/Modal/ModalHelper.ts b/packages/core/src/components/LegacyModal/ModalHelper.ts
similarity index 74%
rename from packages/core/src/components/Modal/ModalHelper.ts
rename to packages/core/src/components/LegacyModal/ModalHelper.ts
index cb435b9f04..7a23ff3e3d 100644
--- a/packages/core/src/components/Modal/ModalHelper.ts
+++ b/packages/core/src/components/LegacyModal/ModalHelper.ts
@@ -1,8 +1,8 @@
 import { ReactElement } from "react";
-import ModalHeader from "./ModalHeader/ModalHeader";
-import ModalContent from "./ModalContent/ModalContent";
-import ModalFooter from "./ModalFooter/ModalFooter";
-import ModalFooterButtons from "./ModalFooter/ModalFooterButtons/ModalFooterButtons";
+import ModalHeader from "./LegacyModalHeader/LegacyModalHeader";
+import ModalContent from "./LegacyModalContent/LegacyModalContent";
+import ModalFooter from "./LegacyModalFooter/LegacyModalFooter";
+import ModalFooterButtons from "./LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons";
 
 /**
  * @deprecated
diff --git a/packages/core/src/components/Modal/__stories__/Modal.mdx b/packages/core/src/components/LegacyModal/__stories__/LegacyModal.mdx
similarity index 86%
rename from packages/core/src/components/Modal/__stories__/Modal.mdx
rename to packages/core/src/components/LegacyModal/__stories__/LegacyModal.mdx
index e55d7a93a5..43244b7099 100644
--- a/packages/core/src/components/Modal/__stories__/Modal.mdx
+++ b/packages/core/src/components/LegacyModal/__stories__/LegacyModal.mdx
@@ -1,5 +1,5 @@
-import { ComponentRules, UsageGuidelines } from "vibe-storybook-components";
-import { Story, Canvas, Meta } from "@storybook/blocks";
+import { ComponentRules/*, DeprecatedWarning*/, UsageGuidelines } from "vibe-storybook-components";
+import { Canvas, Meta } from "@storybook/blocks";
 import { DIALOG, TIPSEEN, TOOLTIP } from "../../../storybook/components/related-components/component-description-map";
 import {
   DialogAsModalBadExample,
@@ -7,14 +7,18 @@ import {
   TipAlertDialog,
   TipDevDropdownInsideModal,
   TipDialog
-} from "./Modal.stories.helpers";
-import * as ModalStories from "./Modal.stories";
+} from "./LegacyModal.stories.helpers";
+import * as ModalStories from "./LegacyModal.stories";
 
 <Meta of={ModalStories} />
 
 # Modal
 
+[//]: # (// TODO should be added once new Modal is exported)
+[//]: # (<DeprecatedWarning alternativeName="Modal" alternativeLink="/?path=/docs/components-modal-new" />)
+
 - [Overview](#overview)
+- [Import](#import)
 - [Props](#props)
 - [Usage](#usage)
 - [Variants](#variants)
diff --git a/packages/core/src/components/Modal/__stories__/Modal.stories.helpers.tsx b/packages/core/src/components/LegacyModal/__stories__/LegacyModal.stories.helpers.tsx
similarity index 95%
rename from packages/core/src/components/Modal/__stories__/Modal.stories.helpers.tsx
rename to packages/core/src/components/LegacyModal/__stories__/LegacyModal.stories.helpers.tsx
index c5e8e80c2f..b227bebb21 100644
--- a/packages/core/src/components/Modal/__stories__/Modal.stories.helpers.tsx
+++ b/packages/core/src/components/LegacyModal/__stories__/LegacyModal.stories.helpers.tsx
@@ -1,10 +1,10 @@
 import React, { useCallback, useRef, useState } from "react";
 import Button from "../../Button/Button";
-import Modal from "../Modal";
+import Modal from "../LegacyModal";
 import { Dialog, DialogContentContainer, Heading } from "../../../components";
 import Flex from "../../Flex/Flex";
-import ModalFooterButtons from "../ModalFooter/ModalFooterButtons/ModalFooterButtons";
-import styles from "./Modal.stories.module.scss";
+import ModalFooterButtons from "../LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons";
+import styles from "./LegacyModal.stories.module.scss";
 import cx from "classnames";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
diff --git a/packages/core/src/components/Modal/__stories__/Modal.stories.module.scss b/packages/core/src/components/LegacyModal/__stories__/LegacyModal.stories.module.scss
similarity index 100%
rename from packages/core/src/components/Modal/__stories__/Modal.stories.module.scss
rename to packages/core/src/components/LegacyModal/__stories__/LegacyModal.stories.module.scss
diff --git a/packages/core/src/components/Modal/__stories__/Modal.stories.tsx b/packages/core/src/components/LegacyModal/__stories__/LegacyModal.stories.tsx
similarity index 95%
rename from packages/core/src/components/Modal/__stories__/Modal.stories.tsx
rename to packages/core/src/components/LegacyModal/__stories__/LegacyModal.stories.tsx
index 50c264c961..b0d6579237 100644
--- a/packages/core/src/components/Modal/__stories__/Modal.stories.tsx
+++ b/packages/core/src/components/LegacyModal/__stories__/LegacyModal.stories.tsx
@@ -1,12 +1,12 @@
 import React, { useCallback, useRef, useState } from "react";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
-import ModalContent from "../ModalContent/ModalContent";
-import ModalFooter from "../ModalFooter/ModalFooter";
-import ModalHeader from "../ModalHeader/ModalHeader";
-import Modal, { ModalProps } from "../Modal";
-import { useHelperOpenModalButton } from "./Modal.stories.helpers";
+import ModalContent from "../LegacyModalContent/LegacyModalContent";
+import ModalFooter from "../LegacyModalFooter/LegacyModalFooter";
+import ModalHeader from "../LegacyModalHeader/LegacyModalHeader";
+import Modal, { LegacyModalProps as ModalProps } from "../LegacyModal";
+import { useHelperOpenModalButton } from "./LegacyModal.stories.helpers";
 import EditableHeading from "../../../components/EditableHeading/EditableHeading";
-import ModalFooterButtons from "../ModalFooter/ModalFooterButtons/ModalFooterButtons";
+import ModalFooterButtons from "../LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons";
 import { Upgrade } from "@vibe/icons";
 const metaSettings = createStoryMetaSettingsDecorator({
   component: Modal,
diff --git a/packages/core/src/components/Modal/__tests__/Modal.snapshot.test.js b/packages/core/src/components/LegacyModal/__tests__/LegacyModal.snapshot.test.js
similarity index 98%
rename from packages/core/src/components/Modal/__tests__/Modal.snapshot.test.js
rename to packages/core/src/components/LegacyModal/__tests__/LegacyModal.snapshot.test.js
index b59769dbfd..adad70d100 100644
--- a/packages/core/src/components/Modal/__tests__/Modal.snapshot.test.js
+++ b/packages/core/src/components/LegacyModal/__tests__/LegacyModal.snapshot.test.js
@@ -1,5 +1,5 @@
 import React from "react";
-import Modal from "../Modal";
+import Modal from "../LegacyModal";
 import { ModalContent, ModalFooter, ModalHeader } from "../../../components";
 import { cleanup, render } from "@testing-library/react";
 import { snapshotDiff } from "../../../utils/jest-utils";
diff --git a/packages/core/src/components/Modal/__tests__/Modal.test.js b/packages/core/src/components/LegacyModal/__tests__/LegacyModal.test.js
similarity index 98%
rename from packages/core/src/components/Modal/__tests__/Modal.test.js
rename to packages/core/src/components/LegacyModal/__tests__/LegacyModal.test.js
index 96490c6932..50aa0bffdc 100644
--- a/packages/core/src/components/Modal/__tests__/Modal.test.js
+++ b/packages/core/src/components/LegacyModal/__tests__/LegacyModal.test.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { render, cleanup, fireEvent } from "@testing-library/react";
 import { ModalHeader } from "../../../components";
-import { ModalExampleWrapper } from "../__stories__/Modal.stories.helpers";
+import { ModalExampleWrapper } from "../__stories__/LegacyModal.stories.helpers";
 import { ComponentDefaultTestId } from "../../../tests/test-ids-utils";
 
 const MODAL_TITLE_TEXT = "Modal title";
diff --git a/packages/core/src/components/Modal/__tests__/__snapshots__/Modal.snapshot.test.js.snap b/packages/core/src/components/LegacyModal/__tests__/__snapshots__/LegacyModal.snapshot.test.js.snap
similarity index 100%
rename from packages/core/src/components/Modal/__tests__/__snapshots__/Modal.snapshot.test.js.snap
rename to packages/core/src/components/LegacyModal/__tests__/__snapshots__/LegacyModal.snapshot.test.js.snap
diff --git a/packages/core/src/components/Modal/a11yDialog.ts b/packages/core/src/components/LegacyModal/a11yDialog.ts
similarity index 100%
rename from packages/core/src/components/Modal/a11yDialog.ts
rename to packages/core/src/components/LegacyModal/a11yDialog.ts
diff --git a/packages/core/src/components/LegacyModal/index.ts b/packages/core/src/components/LegacyModal/index.ts
new file mode 100644
index 0000000000..6c1a30d034
--- /dev/null
+++ b/packages/core/src/components/LegacyModal/index.ts
@@ -0,0 +1,19 @@
+export { default as Modal, LegacyModalProps as ModalProps } from "./LegacyModal";
+export {
+  default as ModalHeader,
+  LegacyModalHeaderProps as ModalHeaderProps
+} from "./LegacyModalHeader/LegacyModalHeader";
+export {
+  default as ModalContent,
+  LegacyModalContentProps as ModalContentProps
+} from "./LegacyModalContent/LegacyModalContent";
+export {
+  default as ModalFooter,
+  LegacyModalFooterProps as ModalFooterProps
+} from "./LegacyModalFooter/LegacyModalFooter";
+export {
+  default as ModalFooterButtons,
+  LegacyModalFooterButtonsProps as ModalFooterButtonsProps
+} from "./LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons";
+
+export * from "./LegacyModal.types";
diff --git a/packages/core/src/components/Modal/useAnimationProps.ts b/packages/core/src/components/LegacyModal/useAnimationProps.ts
similarity index 100%
rename from packages/core/src/components/Modal/useAnimationProps.ts
rename to packages/core/src/components/LegacyModal/useAnimationProps.ts
diff --git a/packages/core/src/components/Modal/useBodyScrollLock.ts b/packages/core/src/components/LegacyModal/useBodyScrollLock.ts
similarity index 100%
rename from packages/core/src/components/Modal/useBodyScrollLock.ts
rename to packages/core/src/components/LegacyModal/useBodyScrollLock.ts
diff --git a/packages/core/src/components/Modal/useShowHideModal.ts b/packages/core/src/components/LegacyModal/useShowHideModal.ts
similarity index 100%
rename from packages/core/src/components/Modal/useShowHideModal.ts
rename to packages/core/src/components/LegacyModal/useShowHideModal.ts
diff --git a/packages/core/src/components/Modal/index.ts b/packages/core/src/components/Modal/index.ts
deleted file mode 100644
index 557878bcf3..0000000000
--- a/packages/core/src/components/Modal/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export { default as Modal, ModalProps } from "./Modal";
-export { default as ModalHeader, ModalHeaderProps } from "./ModalHeader/ModalHeader";
-export { default as ModalContent, ModalContentProps } from "./ModalContent/ModalContent";
-export { default as ModalFooter, ModalFooterProps } from "./ModalFooter/ModalFooter";
-export {
-  default as ModalFooterButtons,
-  ModalFooterButtonsProps
-} from "./ModalFooter/ModalFooterButtons/ModalFooterButtons";
-
-export * from "./Modal.types";
diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts
index 9163f39e64..402992274d 100644
--- a/packages/core/src/components/index.ts
+++ b/packages/core/src/components/index.ts
@@ -40,7 +40,7 @@ export * from "./ListTitle";
 export * from "./Loader";
 export * from "./Menu";
 export * from "./MenuButton";
-export * from "./Modal";
+export * from "./LegacyModal";
 export * from "./MultiStepIndicator";
 export * from "./ProgressBars";
 export * from "./RadioButton";
diff --git a/packages/core/src/storybook/patterns/dropdown-in-modals/dropdown-in-modals.stories.tsx b/packages/core/src/storybook/patterns/dropdown-in-modals/dropdown-in-modals.stories.tsx
index e6dc4ebfac..8c541d5d15 100644
--- a/packages/core/src/storybook/patterns/dropdown-in-modals/dropdown-in-modals.stories.tsx
+++ b/packages/core/src/storybook/patterns/dropdown-in-modals/dropdown-in-modals.stories.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback, useState, useMemo } from "react";
-import ModalContent from "../../../components/Modal/ModalContent/ModalContent";
+import LegacyModalContent from "../../../components/LegacyModal/LegacyModalContent/LegacyModalContent";
 import Dropdown from "../../../components/Dropdown/Dropdown";
 import { DropdownOption } from "../../../components/Dropdown/Dropdown.types";
-import Modal from "../../../components/Modal/Modal";
+import Modal from "../../../components/LegacyModal/LegacyModal";
 import ModalExampleContent from "./ModalExampleContent";
 import Box from "../../../components/Box/Box";
 import Flex from "../../../components/Flex/Flex";
@@ -43,9 +43,9 @@ export const ModalWithDamagedDropdown: React.FC = () => {
     <div>
       <Button onClick={() => setShow(true)}>Open Modal</Button>
       <Modal title="Modal with dropdown" show={show} onClose={closeModal}>
-        <ModalContent>
+        <LegacyModalContent>
           <Dropdown options={options} />
-        </ModalContent>
+        </LegacyModalContent>
       </Modal>
     </div>
   );
@@ -107,9 +107,9 @@ export const MenuPosition: React.FC = () => {
       <div>
         <Button onClick={() => setShow(true)}>Open Modal</Button>
         <Modal title="Modal with dropdown" show={show} onClose={closeModal}>
-          <ModalContent>
+          <LegacyModalContent>
             <Dropdown placeholder="Dropdown" options={options} menuPosition={Dropdown.menuPositions.FIXED} />
-          </ModalContent>
+          </LegacyModalContent>
         </Modal>
       </div>
       <Dialog
@@ -185,9 +185,9 @@ export const InsideOverflowContainer: React.FC = () => {
       <div>
         <Button onClick={() => setShow(true)}>Open Modal</Button>
         <Modal title="Modal with dropdown" show={show} onClose={closeModal}>
-          <ModalContent>
+          <LegacyModalContent>
             <Dropdown options={options} insideOverflowContainer />
-          </ModalContent>
+          </LegacyModalContent>
         </Modal>
       </div>
       <Dialog
diff --git a/packages/core/webpack/published-ts-components.js b/packages/core/webpack/published-ts-components.js
deleted file mode 100644
index e69de29bb2..0000000000