feat(Modal): modal component with basic functionality

packages/core/src/components/ModalNew/Modal/Modal.module.scss

@@ -0,0 +1,12 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(41, 47, 76, 0.7);
+}
+
+.modal {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--primary-background-color);
+}

packages/core/src/components/ModalNew/Modal/Modal.tsx

@@ -0,0 +1,52 @@
+import React, { forwardRef } from "react";
+import cx from "classnames";
+import { getTestId } from "../../../tests/test-ids-utils";
+import { ComponentDefaultTestId } from "../../../tests/constants";
+import styles from "./Modal.module.scss";
+import { ModalProps } from "./Modal.types";
+import ModalTopActions from "../ModalTopActions/ModalTopActions";
+
+const Modal = forwardRef(
+  (
+    {
+      show,
+      size = "medium",
+      renderHeaderAction,
+      closeButtonTheme,
+      closeButtonAriaLabel,
+      onClose,
+      children,
+      className,
+      style,
+      id,
+      "data-testid": dataTestId
+    }: ModalProps,
+    ref: React.ForwardedRef<HTMLDivElement>
+  ) => {
+    return (
+      <div id="overlay" className={styles.overlay}>
+        <div
+          ref={ref}
+          className={cx(styles.modal, className)}
+          style={style}
+          id={id}
+          data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL, id)}
+          role="dialog"
+          aria-modal
+          aria-labelledby="TODO" // TODO
+          aria-describedby="TODO" // TODO
+        >
+          <ModalTopActions
+            renderAction={renderHeaderAction}
+            color={closeButtonTheme}
+            closeButtonAriaLabel={closeButtonAriaLabel}
+            onClose={onClose}
+          />
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+
+export default Modal;

packages/core/src/components/ModalNew/Modal/Modal.types.tsx

@@ -0,0 +1,15 @@
+import { VibeComponentProps } from "../../../types";
+import React from "react";
+import { ModalTopActionsProps } from "../ModalTopActions/ModalTopActions.types";
+
+export type ModalSize = "small" | "medium" | "large";
+
+export interface ModalProps extends VibeComponentProps {
+  show: boolean;
+  size?: ModalSize;
+  closeButtonTheme?: ModalTopActionsProps["color"];
+  closeButtonAriaLabel?: ModalTopActionsProps["closeButtonAriaLabel"];
+  onClose?: ModalTopActionsProps["onClose"];
+  renderHeaderAction?: ModalTopActionsProps["renderAction"];
+  children: React.ReactNode;
+}