@prijsvrijtechsupport/ui 0.0.48 → 0.0.49

package/dist/index.cjs

@@ -31,6 +31,7 @@ const tailwind_merge = __toESM(require("tailwind-merge"));
 const react_intersection_observer = __toESM(require("react-intersection-observer"));
 const moment = __toESM(require("moment"));
 const embla_carousel_react = __toESM(require("embla-carousel-react"));
+const embla_carousel_auto_height = __toESM(require("embla-carousel-auto-height"));
 const date_fns = __toESM(require("date-fns"));
 const date_fns_locale = __toESM(require("date-fns/locale"));
 
@@ -49,118 +50,126 @@ var variables_default = {};
 
 //#endregion
 //#region src/components/topMenu/styles.css
-var styles_default$28 = {};
+var styles_default$30 = {};
 
 //#endregion
 //#region src/components/button/styles.css
-var styles_default$27 = {};
+var styles_default$29 = {};
 
 //#endregion
 //#region src/components/priceCheck/styles.css
-var styles_default$26 = {};
+var styles_default$28 = {};
 
 //#endregion
 //#region src/components/toggle/styles.css
-var styles_default$25 = {};
+var styles_default$27 = {};
 
 //#endregion
 //#region src/components/topHeaderMenu/styles.css
-var styles_default$24 = {};
+var styles_default$26 = {};
 
 //#endregion
 //#region src/components/filterButton/styles.css
-var styles_default$23 = {};
+var styles_default$25 = {};
 
 //#endregion
 //#region src/components/searchBox/styles.css
-var styles_default$22 = {};
+var styles_default$24 = {};
 
 //#endregion
 //#region src/components/dropdown/styles.css
-var styles_default$21 = {};
+var styles_default$23 = {};
 
 //#endregion
 //#region src/components/counterIcon/styles.css
-var styles_default$20 = {};
+var styles_default$22 = {};
 
 //#endregion
 //#region src/components/usp/styles.css
-var styles_default$19 = {};
+var styles_default$21 = {};
 
 //#endregion
 //#region src/components/middleNavigation/styles.css
-var styles_default$18 = {};
+var styles_default$20 = {};
 
 //#endregion
 //#region src/components/menu/styles.css
-var styles_default$17 = {};
+var styles_default$19 = {};
 
 //#endregion
 //#region src/components/footer/styles.css
-var styles_default$16 = {};
+var styles_default$18 = {};
 
 //#endregion
 //#region src/components/blogWidget/styles.css
-var styles_default$15 = {};
+var styles_default$17 = {};
 
 //#endregion
 //#region src/components/searchBlock/styles.css
-var styles_default$14 = {};
+var styles_default$16 = {};
 
 //#endregion
 //#region src/components/categoryFilter/styles.css
-var styles_default$13 = {};
+var styles_default$15 = {};
 
 //#endregion
 //#region src/components/collection/styles.css
-var styles_default$12 = {};
+var styles_default$14 = {};
 
 //#endregion
 //#region src/components/review/styles.css
-var styles_default$11 = {};
+var styles_default$13 = {};
 
 //#endregion
 //#region src/components/hotelAccomodationResults/styles.css
-var styles_default$10 = {};
+var styles_default$12 = {};
 
 //#endregion
 //#region src/components/coupon/styles.css
-var styles_default$9 = {};
+var styles_default$11 = {};
 
 //#endregion
 //#region src/components/giftCard/styles.css
-var styles_default$8 = {};
+var styles_default$10 = {};
 
 //#endregion
 //#region src/components/pvPopup/styles.css
-var styles_default$7 = {};
+var styles_default$9 = {};
 
 //#endregion
 //#region src/components/photoCardsRotated/styles.css
-var styles_default$6 = {};
+var styles_default$8 = {};
 
 //#endregion
 //#region src/components/spotlights/styles.css
-var styles_default$5 = {};
+var styles_default$7 = {};
 
 //#endregion
 //#region src/components/viewedAccomodations/styles.css
-var styles_default$4 = {};
+var styles_default$6 = {};
 
 //#endregion
 //#region src/components/quantityButtons/styles.css
-var styles_default$3 = {};
+var styles_default$5 = {};
 
 //#endregion
 //#region src/components/matrixTable/styles.css
-var styles_default$2 = {};
+var styles_default$4 = {};
 
 //#endregion
 //#region src/components/pageNavigation/styles.css
-var styles_default$1 = {};
+var styles_default$3 = {};
 
 //#endregion
 //#region src/components/calendar/styles.css
+var styles_default$2 = {};
+
+//#endregion
+//#region src/components/slider/styles.css
+var styles_default$1 = {};
+
+//#endregion
+//#region src/components/priceBox/styles.css
 var styles_default = {};
 
 //#endregion
@@ -1773,6 +1782,27 @@ const IconCocktail = ({ className,...props }) => /* @__PURE__ */ (0, react_jsx_r
 	})
 });
 
+//#endregion
+//#region src/icons/IconImage.tsx
+const IconImage = ({ className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	className,
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	...props,
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		d: "M18 10C19.1046 10 20 9.10457 20 8C20 6.89543 19.1046 6 18 6C16.8954 6 16 6.89543 16 8C16 9.10457 16.8954 10 18 10Z",
+		fill: "currentColor"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		"fill-rule": "evenodd",
+		"clip-rule": "evenodd",
+		d: "M3 3H21C22.6569 3 24 4.34315 24 6V18C24 19.6569 22.6569 21 21 21H3C1.34315 21 0 19.6569 0 18V6C0 4.34315 1.34314 3 3 3ZM3 5C2.44772 5 2 5.44772 2 6V14.1922L7.48523 8.70694C7.87585 8.31644 8.50891 8.31644 8.89954 8.70694L15.1924 14.9999L17.4852 12.7069C17.8759 12.3164 18.5089 12.3164 18.8995 12.7069L22 15.8075V6C22 5.44772 21.5523 5 21 5H3Z",
+		fill: "currentColor"
+	})]
+});
+
 //#endregion
 //#region src/theme/variables.ts
 const CSS_VARIABLE_KEYS = [
@@ -4217,7 +4247,7 @@ const PriceCheck = ({ className, price, text, disabled = false, "data-testid": t
 			children: text
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			className: `price-check-price-padding${price && price > 999 ? "-large" : ""} text-start price-check-color-price price-check-fontFamily-price font-bold text-2xl whitespace-nowrap price-check-price-margin-top`,
+			className: `price-check-price-padding${price && price > 999 ? "-large" : ""} text-start price-check-color-price price-check-fontFamily-price font-bold price-check-font-size-price whitespace-nowrap price-check-price-margin-top`,
 			children: [
 				price,
 				",",
@@ -5157,11 +5187,12 @@ const QuantityButtons = ({ className, value, setValue, minValue = 0, maxValue =
 //#endregion
 //#region src/components/slider/index.tsx
 const LAZY_LOAD_PLACEHOLDER_SRC = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D";
-function Slider({ slides, options, plugins, lazyLoad = false, showArrows = true, showDots = true, dotsPlacement = "outside", overlay, overlayClassName, className, viewportClassName, containerClassName, slideClassName,...props }) {
+function Slider({ slides = [], options, plugins, lazyLoad = false, showArrows = true, showDots = true, roundedFull = false, showLike = true, dotsPlacement = "outside", overlay, overlayClassName, className, viewportClassName, containerClassName, slideClassName, square = true,...props }) {
 	const [emblaRef, emblaApi] = (0, embla_carousel_react.default)(options, plugins);
 	const [selectedIndex, setSelectedIndex] = (0, react.useState)(0);
 	const [scrollSnaps, setScrollSnaps] = (0, react.useState)([]);
 	const [slidesInView, setSlidesInView] = (0, react.useState)([]);
+	const [loadedImages, setLoadedImages] = (0, react.useState)(new Set());
 	const canScrollPrev = (0, react.useMemo)(() => emblaApi?.canScrollPrev() ?? false, [emblaApi, selectedIndex]);
 	const canScrollNext = (0, react.useMemo)(() => emblaApi?.canScrollNext() ?? false, [emblaApi, selectedIndex]);
 	const scrollPrev = (0, react.useCallback)(() => {
@@ -5216,6 +5247,17 @@ function Slider({ slides, options, plugins, lazyLoad = false, showArrows = true,
 		lazyLoad,
 		updateSlidesInView
 	]);
+	(0, react.useEffect)(() => {
+		if (!emblaApi) return;
+		const imageSlides = slides.filter((slide) => (0, react.isValidElement)(slide) && slide.type === "img");
+		if (imageSlides.length > 0 && loadedImages.size === imageSlides.length) {
+			emblaApi.reInit();
+		}
+	}, [
+		emblaApi,
+		loadedImages,
+		slides
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-component": "slider",
 		className: cn("relative", className),
@@ -5225,9 +5267,9 @@ function Slider({ slides, options, plugins, lazyLoad = false, showArrows = true,
 				ref: emblaRef,
 				className: cn("overflow-hidden", viewportClassName),
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: cn("flex touch-pan-y", containerClassName),
+					className: cn("flex touch-pan-y items-start", containerClassName),
 					children: slides.map((slide, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: cn("min-w-0 shrink-0 grow-0 basis-full", slideClassName),
+						className: cn("min-w-0 shrink-0 grow-0 basis-full h-auto", square && "aspect-square", slideClassName),
 						children: lazyLoad && (0, react.isValidElement)(slide) && slide.type === "img" ? (() => {
 							const hasBeenInView = slidesInView.includes(index);
 							const originalSrc = slide.props.src;
@@ -5235,16 +5277,20 @@ function Slider({ slides, options, plugins, lazyLoad = false, showArrows = true,
 							return (0, react.cloneElement)(slide, {
 								src,
 								"data-src": originalSrc,
-								className: cn(slide.props.className, "h-auto")
+								className: cn(slide.props.className, "h-auto"),
+								onLoad: () => setLoadedImages((prev) => new Set(prev).add(index))
 							});
-						})() : (0, react.isValidElement)(slide) ? (0, react.cloneElement)(slide, { className: cn(slide.props.className, "h-auto") }) : slide
+						})() : (0, react.isValidElement)(slide) && slide.type === "img" ? (0, react.cloneElement)(slide, {
+							className: cn(slide.props.className, "h-auto"),
+							onLoad: () => setLoadedImages((prev) => new Set(prev).add(index))
+						}) : (0, react.isValidElement)(slide) ? (0, react.cloneElement)(slide, { className: cn(slide.props.className, "h-auto") }) : slide
 					}, index))
 				}), showDots && dotsPlacement === "inside" && scrollSnaps.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "pointer-events-none absolute inset-x-0 bottom-3 z-20 flex items-center justify-center gap-2 rounded-2xl bg-black/40 w-fit mx-auto p-1.5",
 					children: scrollSnaps.map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						"aria-label": `Go to slide ${index + 1}`,
-						className: cn("pointer-events-auto cursor-pointer h-2 w-2 rounded-full bg-transparent border-2 border-white", index === selectedIndex && "bg-white"),
+						className: cn("pointer-events-auto cursor-pointer h-2 w-2 bg-transparent rounded-full border-2 border-white", index === selectedIndex && "selectedIndexBg"),
 						onClick: () => scrollTo(index)
 					}, index))
 				})]
@@ -5256,12 +5302,25 @@ function Slider({ slides, options, plugins, lazyLoad = false, showArrows = true,
 					children: overlay
 				})
 			}),
+			showLike && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "pointer-events-none absolute top-4 right-4 z-20",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					"aria-label": "Like",
+					onClick: () => console.log("Like clicked"),
+					className: cn("pointer-events-auto cursor-pointer inline-flex size-5 items-center justify-center"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconHeart, { className: "size-6 text-white hover:text-red-500" })
+					})
+				})
+			}),
 			showArrows && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "pointer-events-none absolute inset-y-0 left-0 right-0 z-20 flex items-center justify-between",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					"aria-label": "Previous slide",
-					className: cn("pointer-events-auto cursor-pointer ml-2 inline-flex size-9 items-center justify-center rounded-full bg-black/40 text-white shadow", !canScrollPrev && "opacity-50"),
+					className: cn("pointer-events-auto cursor-pointer ml-2 inline-flex size-9 items-center justify-center bg-primary-dark-50/50 text-white shadow", roundedFull === true ? "rounded-full" : "rounded-sm", !canScrollPrev && "opacity-50"),
 					onClick: scrollPrev,
 					disabled: !canScrollPrev,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -5271,7 +5330,7 @@ function Slider({ slides, options, plugins, lazyLoad = false, showArrows = true,
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					"aria-label": "Next slide",
-					className: cn("pointer-events-auto cursor-pointer mr-2 inline-flex size-9 items-center justify-center rounded-full bg-black/40 text-white shadow", !canScrollNext && "opacity-50"),
+					className: cn("pointer-events-auto cursor-pointer mr-2 inline-flex size-9 items-center justify-center bg-primary-dark-50/50 text-white shadow", roundedFull === true ? "rounded-full" : "rounded-sm", !canScrollNext && "opacity-50"),
 					onClick: scrollNext,
 					disabled: !canScrollNext,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -6978,7 +7037,7 @@ const Chatbot = ({ className,...props }) => /* @__PURE__ */ (0, react_jsx_runtim
 
 //#endregion
 //#region src/components/priceBox/index.tsx
-const PriceBox = ({ className, hotel, brand, noBorder = false, noHover = false, hidePrice = false, onClick, "data-testid": dataTestId }) => {
+const PriceBox = ({ className, hotel, brand, noBorder = false, noHover = false, hidePrice = false, warnText, buttonText = "Bekijk vakantie", showButtonIcon, onClick, "data-testid": dataTestId }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-testid": dataTestId,
 		"data-component": "price-box",
@@ -6992,6 +7051,10 @@ const PriceBox = ({ className, hotel, brand, noBorder = false, noHover = false,
 					text: hotel.PriceInfo
 				})
 			}),
+			warnText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-[9px] mb-2 order-4 md:order-2 priceBox-warnText",
+				children: warnText
+			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "text-sm flex flex-col gap-3 order-2",
 				children: [
@@ -7005,7 +7068,11 @@ const PriceBox = ({ className, hotel, brand, noBorder = false, noHover = false,
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: hotel.DepartureDate.split(",")[0] }),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 								className: "text-gray-400 ml-2",
-								children: [hotel.Duration, " dagen"]
+								children: [
+									"(",
+									hotel.Duration,
+									" dagen)"
+								]
 							})
 						]
 					}),
@@ -7035,10 +7102,11 @@ const PriceBox = ({ className, hotel, brand, noBorder = false, noHover = false,
 				className: "w-4/12 md:w-full order-3",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 					variant: brand === "prijsvrij" ? "primaryGlow" : "secondary",
-					className: "whitespace-nowrap w-full md:w-auto",
+					className: "whitespace-nowrap w-full",
 					iconRight: true,
-					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconArrowRight, { className: "w-4 h-4" }),
-					children: "Bekijk vakantie"
+					onClick,
+					icon: showButtonIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconArrowRight, { className: "w-4 h-4" }) : undefined,
+					children: buttonText
 				})
 			})
 		]
@@ -8866,7 +8934,7 @@ const Loading = ({ className, plane = true, size = "small",...props }) => {
 	let cloud3Height = 45;
 	let cloud3Position = "bottom-32";
 	if (size === "small") {
-		dollarSize = "size-[30px]";
+		dollarSize = "size-[30px] p-1";
 		planeSize = "w-16 h-16";
 		cloud1Width = 60;
 		cloud1Height = 27;
@@ -8878,7 +8946,7 @@ const Loading = ({ className, plane = true, size = "small",...props }) => {
 		cloud3Height = 16;
 		cloud3Position = "bottom-4";
 	} else if (size === "medium") {
-		dollarSize = "size-[45px]";
+		dollarSize = "size-[45px] p-2";
 		planeSize = "w-24 h-24";
 		cloud1Width = 140;
 		cloud1Height = 63;
@@ -8890,7 +8958,7 @@ const Loading = ({ className, plane = true, size = "small",...props }) => {
 		cloud3Height = 32;
 		cloud3Position = "bottom-10";
 	} else if (size === "large") {
-		dollarSize = "size-[75px]";
+		dollarSize = "size-[75px] p-2";
 	}
 	const brand = useBrand();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -8921,7 +8989,7 @@ const Loading = ({ className, plane = true, size = "small",...props }) => {
 			className: "relative overflow-hidden w-full h-full",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: `${brand === "prijsvrij" ? "bg-primary" : "bg-secondary"} rounded-full ${dollarSize} flex items-center justify-center`,
-				children: brand === "prijsvrij" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dollar, { className: "animate-spin-slow w-full h-full p-2" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DReizenSign, { className: " w-full h-full p-2 animate-spin-slow" })
+				children: brand === "prijsvrij" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dollar, { className: "animate-spin-slow w-full h-full" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DReizenSign, { className: " w-full h-full animate-spin-slow" })
 			})
 		})
 	});
@@ -8988,74 +9056,81 @@ const ReviewSmall = ({ className, rating, showArrow = true, "data-testid": dataT
 
 //#endregion
 //#region src/components/hero/index.tsx
-const Hero = ({ className, sliderImages, topRightImage, bottomLeftImage, bottomRightImage, bottomRightOverlay, hotel, priceBoxPosition = "end",...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	"data-component": "hero",
-	className: (0, clsx.default)(className, "bg-white p-1 rounded-lg hero-shadow"),
-	...props,
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex flex-col md:flex-row",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: (0, clsx.default)("grid gap-1 md:aspect-[16/6] md:grid-cols-3 md:grid-rows-[2fr_1fr]", priceBoxPosition === "start" ? "order-2 md:order-2" : "order-1 md:order-1"),
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "md:col-span-2 md:row-span-2 overflow-hidden rounded-l-lg relative",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReviewSmall, {
-						className: "absolute right-4 top-4 z-50",
-						rating: 9.3
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Slider, {
-						className: "h-full max-h-[340px] md:h-full rounded-l-lg",
-						slides: sliderImages.map((src, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-							src,
-							alt: `Hero slide ${index + 1}`,
-							className: "h-full w-full object-cover rounded-l-lg"
-						}, index)),
-						showArrows: false,
-						dotsPlacement: "inside",
-						options: { loop: true },
-						lazyLoad: true
-					})]
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "hidden md:flex col-span-1 row-span-1 overflow-hidden",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-						src: topRightImage,
-						alt: "Hero image 1",
-						className: "h-full w-full object-cover"
-					})
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "hidden md:grid col-span-1 row-span-1 grid-cols-2 gap-1",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "overflow-hidden",
+const Hero = ({ className, sliderImages, topRightImage, bottomLeftImage, bottomRightImage, bottomRightOverlay, warnText, hotel, buttonText = "Bekijk vakantie", priceBoxPosition = "end",...props }) => {
+	const brand = useBrand("prijsvrij");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-component": "hero",
+		className: (0, clsx.default)(className, "bg-white p-1 rounded-sm hero-shadow"),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col md:flex-row",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, clsx.default)("grid gap-1 md:aspect-[16/6] md:grid-cols-3 md:grid-rows-[2fr_1fr]", priceBoxPosition === "start" ? "order-2 md:order-2" : "order-1 md:order-1"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "md:col-span-2 md:row-span-2 overflow-hidden rounded-l-sm relative",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReviewSmall, {
+							className: "absolute right-4 top-4 z-50",
+							rating: 9.3
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Slider, {
+							className: "rounded-l-sm",
+							slides: sliderImages.map((src, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+								src,
+								alt: `Hero slide ${index + 1}`,
+								className: "h-full w-full object-cover rounded-l-sm"
+							}, index)),
+							showArrows: false,
+							dotsPlacement: "inside",
+							showDots: false,
+							options: { loop: true },
+							plugins: [(0, embla_carousel_auto_height.default)()],
+							lazyLoad: true
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "hidden md:flex col-span-1 row-span-1 overflow-hidden",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-							src: bottomLeftImage,
-							alt: "Hero image 2",
-							className: "h-full w-full object-cover"
+							src: topRightImage,
+							alt: "Hero image 1",
+							className: "h-full w-full object-cover rounded-tr-sm"
 						})
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "relative overflow-hidden ",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-							src: bottomRightImage,
-							alt: "Hero image 3",
-							className: "h-full w-full object-cover"
-						}), bottomRightOverlay && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "absolute inset-0",
-							children: bottomRightOverlay
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "hidden md:grid col-span-1 row-span-1 grid-cols-2 gap-1",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "overflow-hidden",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+								src: bottomLeftImage,
+								alt: "Hero image 2",
+								className: "h-full w-full object-cover"
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "relative overflow-hidden ",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+								src: bottomRightImage,
+								alt: "Hero image 3",
+								className: "h-full w-full object-cover"
+							}), bottomRightOverlay && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "absolute inset-0",
+								children: bottomRightOverlay
+							})]
 						})]
-					})]
+					})
+				]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, clsx.default)(priceBoxPosition === "start" ? "order-1 md:order-1" : "order-2 md:order-2"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PriceBox, {
+					noHover: true,
+					noBorder: true,
+					hotel,
+					brand,
+					warnText: warnText || "",
+					buttonText
 				})
-			]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, clsx.default)(priceBoxPosition === "start" ? "order-1 md:order-1" : "order-2 md:order-2"),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PriceBox, {
-				noHover: true,
-				noBorder: true,
-				hotel,
-				brand: "prijsvrij"
-			})
-		})]
-	})
-});
+			})]
+		})
+	});
+};
 
 //#endregion
 //#region src/components/review/index.tsx
@@ -10584,6 +10659,7 @@ exports.IconHot = IconHot;
 exports.IconHotel = IconHotel;
 exports.IconHouse = IconHouse;
 exports.IconIce = IconIce;
+exports.IconImage = IconImage;
 exports.IconInfo = IconInfo;
 exports.IconInstagram = IconInstagram;
 exports.IconLuggage = IconLuggage;