fix(BOOK-138): Fixed several issues after country map functionality was added

* fix(BOOK-138): Fixed issue when hovering markers and info windows for both city cluster marker as city markers.

Approved-by: Matilda Landström

packages/design-system/lib/components/Map/InfoWindow/index.tsx

@@ -0,0 +1,51 @@
+import {
+  InfoWindow as GoogleMapsInfoWindow,
+  type InfoWindowProps as GoogleMapsInfoWindowProps,
+} from '@vis.gl/react-google-maps'
+
+import styles from './infoWindow.module.css'
+
+import type { MouseEventHandler } from 'react'
+
+interface InfoWindowProps
+  extends React.PropsWithChildren<
+    Omit<GoogleMapsInfoWindowProps, 'pixelOffset'>
+  > {
+  pixelOffsetY?: number
+  onMouseEnter?: MouseEventHandler<HTMLDivElement>
+  onMouseLeave?: MouseEventHandler<HTMLDivElement>
+}
+
+export function InfoWindow({
+  children,
+  pixelOffsetY = -12,
+  onMouseEnter,
+  onMouseLeave,
+  ...options
+}: InfoWindowProps) {
+  function onMouseEnterHandler(e: React.MouseEvent<HTMLDivElement>) {
+    if (onMouseEnter) {
+      onMouseEnter(e)
+    }
+  }
+
+  function onMouseLeaveHandler(e: React.MouseEvent<HTMLDivElement>) {
+    if (onMouseLeave) {
+      onMouseLeave(e)
+    }
+  }
+
+  return (
+    <GoogleMapsInfoWindow {...options}>
+      <div
+        className={styles.infoWindow}
+        onMouseEnter={onMouseEnterHandler}
+        onMouseLeave={onMouseLeaveHandler}
+        style={{ paddingBottom: pixelOffsetY ? `${pixelOffsetY * -1}px` : 0 }}
+      >
+        <div className={styles.content}>{children}</div>
+        <span className={styles.arrow} />
+      </div>
+    </GoogleMapsInfoWindow>
+  )
+}