Merged in feat/sw-587-sidepeek-for-room (pull request #767)

Create the sidepeek for a specific roomtype. This also changes the lightbox to use react-aria instead of radix-ui, so we use the same for the lightbox and the sidepeek. Works better together!


Approved-by: Bianca Widstam

components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx

@@ -5,14 +5,13 @@ import { useIntl } from "react-intl"
 import { RateDefinition } from "@/server/routers/hotels/output"
 
 import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption"
-import { ChevronRightSmallIcon } from "@/components/Icons"
-import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import ImageGallery from "../../ImageGallery"
+import RoomSidePeek from "../RoomSidePeek"
 
 import styles from "./roomCard.module.css"
 
@@ -83,16 +82,10 @@ export default function RoomCard({
               : `${roomSize?.min}-${roomSize?.max}`}
             m²
           </Caption>
-          <Button
-            intent="text"
-            type="button"
-            size="small"
-            theme="base"
-            className={styles.button}
-          >
-            {intl.formatMessage({ id: "See room details" })}
-            <ChevronRightSmallIcon color="burgundy" width={20} height={20} />
-          </Button>
+          <RoomSidePeek
+            selectedRoom={selectedRoom}
+            roomConfiguration={roomConfiguration}
+          />
         </div>
         <div className={styles.container}>
           <div className={styles.roomDetails}>