Fix modal module and component

stories/base/modal.module.scss

@@ -0,0 +1,21 @@
+.modalOverlay {
+  position: fixed; /* Use fixed positioning */
+  top: 0;
+  left: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
+  display: flex; /* Use flexbox for centering */
+  justify-content: center; /* Center horizontally */
+  align-items: center; /* Center vertically */
+  z-index: 1000; /* Ensure it sits above other content */
+}
+
+.modalContent {
+  width: 500px; /* Or any desired width */
+  padding: 20px;
+  background-color: white; /* Background color of the modal */
+  border-radius: 35px; /* Optional: rounded corners */
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: shadow for aesthetics */
+  overflow: hidden;
+}

stories/base/modal.tsx

@@ -0,0 +1,28 @@
+import { ReactNode, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import styles from './modal.module.scss';
+
+type Props = {
+  children: ReactNode | ReactNode[];
+};
+function Portal({ children }: Props) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+
+    return () => setMounted(false);
+  }, []);
+
+  return mounted
+    ? createPortal(
+        <div className={styles.modalOverlay}>
+          <div className={styles.modalContent}>{children}</div>
+        </div>,
+        document.body
+      )
+    : null;
+}
+
+export default Portal;

stories/phone-input.stories.tsx

@@ -12,6 +12,7 @@ import {
   phoneValidationSchema,
   usePhoneState,
 } from '../src/use-phone-state/use-phone-state';
+import Modal from './base/modal';
 import styles from './phone-input-stories.module.scss';
 
 export default {
@@ -589,6 +590,39 @@ export function Portal() {
   );
 }
 
+export function ModalPortal() {
+  return (
+    <Modal>
+      <div className={styles.modal}>
+        <PhoneInput.Root>
+          {({ country }) => (
+            <PhoneInput.Trigger>
+              <CountryFlag country={country} />
+            </PhoneInput.Trigger>
+          )}
+          {({ countryList }) => (
+            <PhoneInput.Portal>
+              <PhoneInput.Dialog>
+                <ul>
+                  {countryList.map((countryItem) => (
+                    <PhoneInput.Item
+                      country={countryItem.alpha2}
+                      key={countryItem.alpha2}
+                    >
+                      {countryItem.name}
+                    </PhoneInput.Item>
+                  ))}
+                </ul>
+              </PhoneInput.Dialog>
+            </PhoneInput.Portal>
+          )}
+          <PhoneInput.NumberInput placeholder="Phone" />
+        </PhoneInput.Root>
+      </div>
+    </Modal>
+  );
+}
+
 export function Flags() {
   const { country, countryList, handleCountryChange } = usePhoneState();