fix: Make esm build emit imports with extensions

src/YouTubePlaylist.tsx

@@ -1,10 +1,11 @@
 import { ReactElement, useRef, useEffect, useState } from "react";
+// .js(x) extensions are required for ESM build import resolution
 import {
   YouTubePlaylistPropsType,
   PlaylistData,
-} from "./YouTubePlaylist.types";
-import { youTubePlaylistStyles } from "./youTubePlaylistStyles";
-import getPlaylistData from "./getPlaylistData";
+} from "./YouTubePlaylist.types.jsx";
+import { youTubePlaylistStyles } from "./youTubePlaylistStyles.js";
+import getPlaylistData from "./getPlaylistData.js";
 
 export function YouTubePlaylist({
   apiKey,

src/getPlaylistData.ts

@@ -1,17 +1,17 @@
-import { FetchedData, PlaylistDataItem } from "./getPlaylistData.types";
+import { FetchedData, PlaylistDataItem } from "./getPlaylistData.types.js"; // .js extension is required for ESM build import resolution
 
 async function getPlaylistData(
   apiKey: string,
   playlistId: string,
-  currNextPageToken?: string
+  currNextPageToken?: string,
 ) {
   const youtubePlaylistItemsRequestEndPoint =
     "https://www.googleapis.com/youtube/v3/playlistItems";
 
   const fetchedPlaylist = await fetch(
     `${youtubePlaylistItemsRequestEndPoint}?part=snippet&playlistId=${playlistId}&maxResults=50${
       currNextPageToken ? `&pageToken=${currNextPageToken}` : ""
-    }&key=${apiKey}`
+    }&key=${apiKey}`,
   );
 
   const data: FetchedData = await fetchedPlaylist.json();

src/youTubePlaylistStyles.ts

@@ -1,9 +1,9 @@
-import { YouTubePlaylistStylesType } from "./YouTubePlaylist.types";
+import { YouTubePlaylistStylesType } from "./YouTubePlaylist.types.jsx"; // .jsx extension is required for ESM build import resolution
 
 export function youTubePlaylistStyles(
   columnCount?: string | number,
   columnWidth?: string | number,
-  gapSize?: number
+  gapSize?: number,
 ): YouTubePlaylistStylesType {
   const loaderContainerStyle: React.CSSProperties = {
     display: "flex",