@prijsvrijtechsupport/ui 0.0.47 → 0.0.49

package/dist/index.cjs

@@ -31,12 +31,9 @@ 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 react_day_picker = __toESM(require("react-day-picker"));
+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"));
-const __floating_ui_react = __toESM(require("@floating-ui/react"));
-const react_dom = __toESM(require("react-dom"));
-const react_select = __toESM(require("react-select"));
 
 //#region src/jsx-runtime-shim.ts
 const jsx = react.createElement;
@@ -53,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
@@ -1777,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 = [
@@ -4221,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,
 				",",
@@ -5161,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)(() => {
@@ -5220,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),
@@ -5229,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;
@@ -5239,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))
 				})]
@@ -5260,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", {
@@ -5275,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", {
@@ -6982,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",
@@ -6996,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: [
@@ -7009,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)"
+								]
 							})
 						]
 					}),
@@ -7039,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
 				})
 			})
 		]
@@ -7050,959 +7114,148 @@ const PriceBox = ({ className, hotel, brand, noBorder = false, noHover = false,
 };
 
 //#endregion
-//#region src/utils/enums.ts
-let ACTION_ICON_STYLE_VARIANT = /* @__PURE__ */ function(ACTION_ICON_STYLE_VARIANT$1) {
-	ACTION_ICON_STYLE_VARIANT$1["DEFAULT"] = "default";
-	ACTION_ICON_STYLE_VARIANT$1["TRANSPARENT"] = "transparent";
-	ACTION_ICON_STYLE_VARIANT$1["SMALL"] = "small";
-	ACTION_ICON_STYLE_VARIANT$1["ROUND"] = "round";
-	return ACTION_ICON_STYLE_VARIANT$1;
-}({});
-let THEME_ICON_STYLE_VARIANT = /* @__PURE__ */ function(THEME_ICON_STYLE_VARIANT$1) {
-	THEME_ICON_STYLE_VARIANT$1["PINK_WITH_BACKGROUND"] = "pink-with-background";
-	return THEME_ICON_STYLE_VARIANT$1;
-}({});
-let COLOR = /* @__PURE__ */ function(COLOR$1) {
-	COLOR$1["PRIMARY"] = "primary";
-	COLOR$1["BLACK"] = "black";
-	COLOR$1["LIGHT_BLUE"] = "light-blue";
-	COLOR$1["LIGHT_BLUE_DISABLED"] = "light-blue-disabled";
-	COLOR$1["GREEN"] = "green";
-	COLOR$1["GREEN_LIGHT"] = "green-light";
-	COLOR$1["PINK"] = "pink";
-	COLOR$1["PINK_LIGHT"] = "pink-light";
-	COLOR$1["ORANGE"] = "orange";
-	COLOR$1["ORANGE_LIGHT"] = "orange-light";
-	COLOR$1["ACCENT_BLUE"] = "accent-blue";
-	COLOR$1["ACCENT_BLUE_LIGHT"] = "accent-blue-light";
-	COLOR$1["YELLOW"] = "yellow";
-	COLOR$1["CHECK"] = "check";
-	COLOR$1["WARNING"] = "warning";
-	COLOR$1["ERROR"] = "error";
-	COLOR$1["SUCCESS"] = "success";
-	COLOR$1["WARNING_LIGHT"] = "warning-light";
-	COLOR$1["ULTRA_LIGHT_BLUE"] = "ultra-light-blue";
-	COLOR$1["ULTRA_LIGHT_GRAY"] = "ultra-light-gray";
-	COLOR$1["TURQUOISE"] = "turquoise";
-	COLOR$1["RED"] = "red";
-	COLOR$1["GRAY"] = "gray";
-	COLOR$1["WHITE"] = "white";
-	COLOR$1["PURPLE"] = "purple";
-	COLOR$1["PURPLE_LIGHT"] = "purple-light";
-	return COLOR$1;
-}({});
-let REGION = /* @__PURE__ */ function(REGION$1) {
-	REGION$1["NETHERLANDS"] = "nl";
-	REGION$1["BELGIUM"] = "nl-BE";
-	REGION$1["UNITED_KINGDOM"] = "gb";
-	return REGION$1;
-}({});
-let TOOLTIP_COLOR = /* @__PURE__ */ function(TOOLTIP_COLOR$1) {
-	TOOLTIP_COLOR$1["DEFAULT"] = "default";
-	TOOLTIP_COLOR$1["WHITE"] = "white";
-	return TOOLTIP_COLOR$1;
-}({});
-
-//#endregion
-//#region src/components/actionIcon/index.tsx
-const ActionIcon = (0, react.forwardRef)(({ title, disabled = false, styleVariant = "default", icon, type = "button", "data-testid": testId, iconSize = 20, strokeWidth = 1, onClick, className,...props }, ref) => {
-	const variantClassNames = (0, clsx.default)({
-		"active:translate-y-[1px] content-center flex items-center justify-center rounded-[4px] border border-gray-200 hover:border-black text-black child:p-10 w-[36px] h-[36px] disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.DEFAULT,
-		"active:translate-y-[1px] border-none content-center flex items-center justify-center rounded-[4px] border text-black child:p-10 w-[36px] h-[36px] disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.TRANSPARENT,
-		"active:translate-y-[1px] content-center flex items-center justify-center rounded-[4px] child:p-10 w-[37px] h-[37px] text-black rounded-full bg-primary hover:bg-turquoise-700 disabled:turquoise-50 disabled:text-gray-800": styleVariant === ACTION_ICON_STYLE_VARIANT.ROUND,
-		"w-7 h-7 active:translate-y-[1px] content-center flex items-center justify-center rounded-[4px] border border-gray-200 hover:border-black text-black hover:bg-gray-50 disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.SMALL
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		title,
-		type,
-		disabled,
-		"data-testid": testId,
-		"data-component": "ActionIcon",
-		className: cn(variantClassNames, { "hover:bg-transparant cursor-not-allowed hover:border-gray-200": disabled }, className),
+//#region src/components/filters/FilterButton.tsx
+const FilterButton$1 = ({ onClick, hasFilters, reset, filtersText, resetText }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	className: "flex gap-3",
+	"data-testid": "filterButton",
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 		onClick,
-		ref,
-		"data-tooltip-id": title,
-		"data-tooltip-content": title,
-		...props,
-		children: icon ? formatIcon(icon, {
-			stroke: strokeWidth,
-			size: iconSize
-		}) : props["children"]
-	}) });
+		variant: "secondary",
+		className: "font-normal md:font-normal",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {}),
+		children: filtersText
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+		className: "text-sm font-normal disabled:text-gray-500",
+		onClick: reset,
+		disabled: !hasFilters,
+		children: resetText
+	})]
 });
-ActionIcon.displayName = "ActionIcon";
-
-//#endregion
-//#region src/components/alert/index.tsx
-const Alert = ({ show, message, type, plain = false, className }) => {
-	const [showAlert, setShowAlert] = (0, react.useState)();
-	const icon = () => {
-		if (plain) return null;
-		switch (type) {
-			case "warning": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-				className: "text-warning hidden md:block",
-				"data-testid": "alert-circle-icon"
-			});
-			case "error": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-				className: "hidden text-red-500 md:block",
-				"data-testid": "alert-circle-icon"
-			});
-			case "success": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-				className: "text-green hidden md:block",
-				"data-testid": "check-circle-icon"
-			});
-		}
+
+//#endregion
+//#region src/components/filters/FilterItem.tsx
+const FilterItem = ({ title, isActive = false, onClick }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+	className: cn("has-checked:border-primary has-checked:bg-turquoise-100 flex cursor-pointer items-center gap-3 rounded-full border border-gray-200 px-7 py-1.5 text-sm leading-6 font-normal transition-all duration-300 ease-in-out hover:bg-gray-50"),
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		type: "checkbox",
+		className: "hidden",
+		onChange: onClick,
+		checked: isActive
+	}), title]
+});
+
+//#endregion
+//#region src/components/filters/index.tsx
+const Filters = ({ filters, setFilters, selectedFilters, selectedFiltersText, filtersText, resetText }) => {
+	const content = (0, react.useRef)(null);
+	const [showFilters, setShowFilters] = (0, react.useState)(false);
+	const onFilter = (filter) => {
+		if (selectedFilters.includes(filter)) setFilters(selectedFilters.filter((f) => f !== filter));
+		else setFilters([...selectedFilters, filter]);
 	};
 	(0, react.useEffect)(() => {
-		setShowAlert(show);
-	}, [show]);
-	if (!showAlert) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: cn(`flex w-full justify-between gap-3 rounded border border-solid p-5 md:items-center md:gap-12 ${plain ? "border-none py-4 text-sm font-medium" : ""}`, {
-			"border-warning bg-warning-light text-warning": type === COLOR.WARNING,
-			"border-red-500 bg-red-50 text-red-500": type === COLOR.ERROR,
-			"border-green bg-green-light text-green": type === COLOR.SUCCESS
-		}, className),
-		"data-component": "Alert",
-		"data-testid": "alert",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex md:items-center",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex md:items-center",
-				children: icon()
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: `m-0 font-medium text-black ${plain ? "" : "md:ml-5"}`,
-				children: message
+		setShowFilters(selectedFilters.length > 0);
+	}, [selectedFilters]);
+	const onReset = () => {
+		setFilters([]);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "grid justify-end gap-3",
+		"data-testid": "filters-component",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center justify-end gap-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-sm font-medium",
+				"data-testid": "filters-title",
+				children: selectedFiltersText
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterButton$1, {
+				onClick: () => setShowFilters(!showFilters),
+				hasFilters: selectedFilters.length > 0,
+				reset: () => onReset(),
+				filtersText,
+				resetText
 			})]
-		}) })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: content,
+			"data-testid": "filters-items-container",
+			"data-visible": showFilters,
+			className: cn("flex flex-wrap justify-end gap-2 overflow-hidden opacity-0 ease-in-out [transition:max-height_0.4s,opacity_0.3s]", showFilters && "opacity-100"),
+			style: { maxHeight: showFilters ? `${content?.current?.scrollHeight}px` : "0px" },
+			children: filters.map((filter) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterItem, {
+				title: filter,
+				isActive: selectedFilters.includes(filter),
+				onClick: () => onFilter(filter)
+			}, filter))
+		})]
 	});
 };
-Alert.displayName = "Alert";
 
 //#endregion
-//#region src/components/textInput/index.tsx
-const TextInput = react.default.forwardRef(({ rightSection, leftSection, className, error, autoFocus, label, maxLength, enablePasswordManagerAutofill = false, onBlur, disabled, loadingState, onKeyDown, min = "0", max, autoComplete, showRightSection = true, step, wrapperClassName, password = false,...props }, ref) => {
-	const [showPassword, setShowPassword] = react.default.useState(false);
+//#region src/components/hamburgerMenuButton/index.tsx
+const HamburgerMenuButton = (0, react.forwardRef)(({ menuState, setMenuState }, ref) => {
+	const defaultClasses = cn("absolute h-[2px] bg-white duration-150");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+		onClick: setMenuState,
+		variant: "textButton",
+		className: "relative h-4 w-6",
+		name: "hamburgerMenuButton",
+		"data-component": "hamburgerMenuButton",
+		"aria-label": "Mobile Menu button",
+		ref,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"data-testid": "hamburger-line-top",
+				className: cn(defaultClasses, "top-0 left-0 w-6", { "translation top-1/2 translate-y-[-50%] rotate-45 transform duration-150 ease-in": menuState })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"data-testid": "hamburger-line-middle",
+				className: cn(defaultClasses, "top-1/2 right-0 w-4 translate-y-[-50%]", { "translation opacity-0 ease-in": menuState })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"data-testid": "hamburger-line-bottom",
+				className: cn(defaultClasses, "bottom-0 left-0 w-6", { "translation top-1/2 translate-y-[-50%] -rotate-45 transform duration-150 ease-in": menuState })
+			})
+		]
+	});
+});
+HamburgerMenuButton.displayName = "HamburgerMenuButton";
+
+//#endregion
+//#region src/components/numberField/index.tsx
+const NumberField = ({ name, value = 0, max, min = 0, isDisabled, id, className = "", label, error, onChange }) => {
+	const handleChange = (e) => {
+		const newValue = parseInt(e.target.value, 10);
+		onChange?.(newValue);
+	};
+	const handleIncrement = () => {
+		onChange?.(value + 1);
+	};
+	const handleDecrement = () => {
+		if (value > 0) onChange?.(value - 1);
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		"data-component": "TextInput",
-		"data-testid": "TextInput",
-		className: (0, clsx.default)("relative", wrapperClassName),
+		"data-testid": "number-field-container",
+		className: `inline-flex flex-col ${className}`,
 		children: [
-			typeof label === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-				htmlFor: props["id"],
-				className: "mb-2 flex items-center gap-1 text-xs font-medium text-black",
+			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				htmlFor: id,
+				className: "mb-1 text-sm font-medium text-gray-700",
 				children: label
-			}) : label,
+			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "relative",
+				className: `has-focus:border-primary group relative flex w-[108px] items-center rounded-md border border-gray-300 ${error ? "border-red-300" : "border-gray-300"}`,
 				children: [
-					leftSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: (0, clsx.default)("absolute top-0 left-0 flex h-10 w-12 content-center items-center justify-center align-middle text-sm font-medium text-black"),
-						children: leftSection
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: handleDecrement,
+						disabled: isDisabled,
+						className: "absolute left-0 flex h-full w-8 items-center justify-center rounded-l-md border-r-0 bg-gray-50 text-gray-500 hover:bg-gray-100",
+						children: "-"
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-						onBlur,
-						onKeyDown,
-						autoComplete,
-						min,
-						max,
-						autoFocus,
-						disabled,
-						step,
-						maxLength,
-						className: (0, clsx.default)(`${loadingState ? "cursor-not-allowed" : ""}`, `${disabled ? "text-gray-500" : "text-gray-900"} selection:bg-turquoise-200 focus:border-turquoise-500 focus:ring-turquoise-500 active:border-turquoise-500 active:ring-turquoise-500 h-10 w-full rounded-[4px] border border-gray-200 bg-gray-50 px-3 text-sm font-normal outline-hidden ${rightSection && "pr-12"} ${leftSection && "pl-12"} ${error && "border-red-500 text-red-500 selection:bg-red-200 focus:border-red-500 focus:ring-red-500 focus:placeholder:text-red-500 active:border-red-500 active:ring-red-500"}`, className),
-						"aria-busy": loadingState || undefined,
-						"data-lpignore": enablePasswordManagerAutofill ? undefined : "true",
-						"data-1p-ignore": enablePasswordManagerAutofill ? undefined : "true",
-						ref,
-						...props,
-						type: password ? showPassword ? "text" : "password" : "text"
-					}),
-					loadingState ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "absolute inset-y-0 right-0 flex h-10 w-12 content-center items-center justify-center align-middle text-sm font-medium text-black",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconAlert, {
-							className: "h-4 w-4 animate-spin text-gray-500",
-							"aria-label": "Loading"
-						})
-					}) : rightSection && showRightSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "absolute inset-y-0 right-0 flex h-10 w-12 content-center items-center justify-center align-middle text-sm font-medium text-black",
-						children: rightSection
-					}),
-					password && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "absolute inset-y-0 right-4 flex content-center items-center justify-center align-middle text-sm font-medium text-black",
-						children: showPassword ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-							"data-testid": "password-visibility-toggle",
-							className: "cursor-pointer text-gray-500",
-							onClick: () => setShowPassword(false)
-						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-							"data-testid": "password-visibility-toggle",
-							className: "cursor-pointer text-gray-500",
-							onClick: () => setShowPassword(true)
-						})
-					})
-				]
-			}),
-			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "mt-2 text-xs font-normal text-red-500",
-				children: error
-			})
-		]
-	});
-});
-
-//#endregion
-//#region src/components/autoCompleteInput/index.tsx
-const AutoCompleteInput = ({ label, onChange, onFocus, inputValue, showSuggestions, handleOnKeyDown, children, error, rightSection, inputRef }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-	className: "relative mb-8",
-	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextInput, {
-		ref: inputRef,
-		label,
-		id: "search",
-		type: "text",
-		name: "searchField",
-		onChange,
-		onFocus,
-		onKeyDown: handleOnKeyDown,
-		value: inputValue,
-		error,
-		rightSection,
-		"aria-autocomplete": "list",
-		"aria-controls": "suggestions-googlemaps-location-list"
-	}), showSuggestions && inputValue && children]
-});
-
-//#endregion
-//#region src/components/avatar/index.tsx
-const radiusFormatter = {
-	0: "rounded-none",
-	2: "rounded-sm",
-	4: "rounded",
-	6: "rounded-lg",
-	8: "rounded-xl",
-	10: "rounded-2xl",
-	12: "rounded-3xl",
-	100: "rounded-full"
-};
-const Avatar = ({ src, alt = "", size = 50, radius = 100, "data-testid": dataTestId = "avatar" }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	"data-component": "Avatar",
-	"data-testid": dataTestId,
-	children: src && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-		src,
-		className: cn("aspect-square appearance-none object-cover", radiusFormatter[radius]),
-		alt,
-		width: size,
-		height: size,
-		"data-testid": "avatar-img"
-	})
-});
-Avatar.displayName = "Avatar";
-
-//#endregion
-//#region src/components/avatarIndicator/index.tsx
-const AvatarIndicator = ({ indicatorCount, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	className: cn("inline-flex h-5 min-w-5 flex-col items-center justify-center gap-2.5 rounded border-2 border-solid border-white bg-blue-950 px-1.5", className),
-	"data-component": "AvatarIndicator",
-	"data-testid": "AvatarIndicator",
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "font-['Gotham'] text-[10px] leading-[10px] font-bold text-white",
-		children: `+${indicatorCount}`
-	})
-});
-
-//#endregion
-//#region src/components/badge/index.tsx
-const Badge = ({ styleVariant = COLOR.ACCENT_BLUE, className, favorite, mobile = false, badgeBorder = false, fullWidth = false, leftSection, rightSection, children,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-	"data-testid": "badge",
-	"data-component": "Badge",
-	className: (0, clsx.default)("inline-flex h-[1.375rem] max-w-full place-content-center items-center p-[10px] align-middle text-xs leading-[20px] font-medium tracking-wide text-wrap whitespace-normal normal-case", mobile ? "rounded-s" : "rounded-[2rem]", fullWidth && "w-full", badgeBorder && {
-		"border-accent-blue": styleVariant === COLOR.ACCENT_BLUE,
-		"border-green-light": styleVariant === COLOR.GREEN_LIGHT,
-		"border-red-500": styleVariant === COLOR.RED,
-		"border-purple": styleVariant === COLOR.PURPLE,
-		"border-warning": styleVariant === COLOR.WARNING,
-		"border-black": styleVariant === COLOR.BLACK,
-		"border-gray-800": styleVariant === COLOR.GRAY,
-		"border-pink": styleVariant === COLOR.PINK_LIGHT || styleVariant === COLOR.PINK,
-		"border-gray-200 bg-white text-black": styleVariant === COLOR.WHITE
-	}, {
-		"bg-accent-blue-light text-accent-blue": styleVariant === COLOR.ACCENT_BLUE,
-		"bg-green-light text-green": styleVariant === COLOR.GREEN_LIGHT,
-		"bg-red-50 text-red-500": styleVariant === COLOR.RED,
-		"bg-purple-light text-purple": styleVariant === COLOR.PURPLE,
-		"bg-warning-light text-warning": styleVariant === COLOR.WARNING,
-		"bg-gray-50 text-black": styleVariant === COLOR.BLACK,
-		"bg-gray-50 text-gray-800": styleVariant === COLOR.GRAY,
-		"bg-pink-light text-pink": styleVariant === COLOR.PINK_LIGHT,
-		"bg-pink text-white": styleVariant === COLOR.PINK,
-		"bg-white text-black": styleVariant === COLOR.WHITE
-	}, className),
-	...props,
-	children: [
-		leftSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			"data-testid": "left-section",
-			children: leftSection
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			"data-testid": "badge-content",
-			className: cn("block h-5 overflow-hidden text-ellipsis whitespace-nowrap", { "flex items-center": favorite }),
-			children
-		}),
-		rightSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			"data-testid": "right-section",
-			children: rightSection
-		})
-	]
-});
-Badge.displayName = "Badge";
-
-//#endregion
-//#region src/components/bigBadge/index.tsx
-const BigBadge = ({ styleVariant = COLOR.GREEN, className, children,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	"data-component": "BigBadge",
-	"data-testid": "big-badge",
-	className: cn("grid h-9 max-w-full min-w-[140px] place-content-center rounded-full border border-solid px-6 py-1 text-sm font-medium whitespace-nowrap lowercase", {
-		"border-green text-green bg-white": styleVariant === COLOR.GREEN,
-		"border-accent-blue text-accent-blue bg-white": styleVariant === COLOR.ACCENT_BLUE,
-		"border-orange text-orange bg-white": styleVariant === COLOR.ORANGE,
-		"group-hover:bg-green-light": styleVariant === COLOR.GREEN,
-		"border-red-500 bg-white text-red-500": styleVariant === COLOR.RED,
-		"group-hover:bg-red-50": styleVariant === COLOR.RED,
-		"border-gray-200 bg-white text-black": styleVariant === COLOR.WHITE,
-		"": styleVariant === COLOR.WHITE
-	}, className),
-	...props,
-	children
-});
-
-//#endregion
-//#region src/components/breadCrumb/index.tsx
-const BreadCrumb = ({ children, LinkText }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkText, {
-	"data-component": "BreadCrumb",
-	classNames: "flex items-center",
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", { role: "img" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: "flex items-center gap-5",
-		children
-	})] })
-});
-BreadCrumb.displayName = "BreadCrumb";
-
-//#endregion
-//#region src/components/popover/index.tsx
-const Popover = (0, react.forwardRef)(({ content, children, hoverEnabled = false, passedOpen = false, placement = "right", style = "card", isMobile = false, className }, ref) => {
-	const [isOpen, setIsOpen] = (0, react.useState)(passedOpen);
-	const mobileStyles = { width: `${style === "card" && "100%"}` };
-	const { refs, floatingStyles, context } = (0, __floating_ui_react.useFloating)({
-		open: isOpen,
-		onOpenChange: setIsOpen,
-		placement: !isMobile ? placement : "bottom-start",
-		middleware: [
-			!isMobile && (0, __floating_ui_react.flip)(),
-			!isMobile && (0, __floating_ui_react.shift)(),
-			(0, __floating_ui_react.offset)(() => ({
-				mainAxis: 15,
-				crossAxis: !isMobile ? 0 : 78
-			}))
-		],
-		whileElementsMounted: __floating_ui_react.autoUpdate
-	});
-	const click = (0, __floating_ui_react.useClick)(context, {
-		event: "click",
-		keyboardHandlers: true
-	});
-	const focus = (0, __floating_ui_react.useFocus)(context);
-	const hover = (0, __floating_ui_react.useHover)(context, { enabled: hoverEnabled });
-	const dismiss = (0, __floating_ui_react.useDismiss)(context);
-	const role = (0, __floating_ui_react.useRole)(context, { role: "tooltip" });
-	const interactions = [
-		click,
-		focus,
-		dismiss,
-		role,
-		hover
-	];
-	const { getReferenceProps, getFloatingProps } = (0, __floating_ui_react.useInteractions)(interactions);
-	(0, react.useImperativeHandle)(ref, () => ({
-		closePopover: () => setIsOpen(false),
-		openPopover: () => setIsOpen(true),
-		togglePopover: () => setIsOpen((prev) => !prev)
-	}));
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: cn("", { "[&>div]:border-navyBlue": isOpen }, className),
-		children: [(0, react.isValidElement)(children) && (0, react.cloneElement)(children, getReferenceProps({
-			ref: refs.setReference,
-			...getReferenceProps()
-		})), isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			ref: refs.setFloating,
-			style: {
-				...floatingStyles,
-				...isMobile && { ...mobileStyles }
-			},
-			...getFloatingProps(),
-			className: (0, clsx.default)("z-60", {
-				"w-fit rounded border border-gray-200! bg-white p-5": style === "minimal",
-				"card w-[489px] drop-shadow-xl": style === "card"
-			}),
-			"data-testid": "popover-container",
-			"data-component": "Popover",
-			children: [style === "minimal" && content, style === "card" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "bg-linear-gradient-x pt-[3px]",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "relative overflow-hidden bg-white p-5",
-					children: [!hoverEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionIcon, {
-						onClick: () => setIsOpen(false),
-						title: "",
-						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {}),
-						styleVariant: "small",
-						className: "absolute top-5 right-5"
-					}), content]
-				})
-			})]
-		})]
-	});
-});
-
-//#endregion
-//#region src/components/datePickerInput/index.tsx
-const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil, className, error, onChange, placeholder, label, disabled, minimalDropdownYears = 4 }) => {
-	const [selected, setSelected] = (0, react.useState)(value);
-	const today = new Date();
-	const [newMonth, setNewMonth] = (0, react.useState)(selected || today);
-	const [dropdownOpened, setDropdownOpened] = (0, react.useState)({
-		month: false,
-		year: false
-	});
-	const locales = {
-		fr: date_fns_locale.fr,
-		enGB: date_fns_locale.enGB,
-		nl: date_fns_locale.nl,
-		nlBE: date_fns_locale.nlBE
-	};
-	const dropdownRef = (0, react.useRef)(null);
-	const popoverRef = (0, react.useRef)(null);
-	const renderLocale = () => {
-		switch (lang) {
-			case "fr-FR": return locales.fr;
-			case "nl-BE": return locales.nlBE;
-			case "nl-NL": return locales.nl;
-			case "en-GB": return locales.enGB;
-			default: return locales.enGB;
-		}
-	};
-	/* istanbul ignore next - relies on dropdown DOM not rendered in tests */
-	const handleClickOutside = (event) => {
-		if (dropdownRef.current && !dropdownRef.current.contains(event.target)) setDropdownOpened({
-			month: false,
-			year: false
-		});
-	};
-	/* istanbul ignore next - environment differences make listener attach hard to test */
-	(0, react.useEffect)(() => {
-		if (dropdownOpened.month || dropdownOpened.year) document.addEventListener("mousedown", handleClickOutside);
-		else document.removeEventListener("mousedown", handleClickOutside);
-		return () => {
-			document.removeEventListener("mousedown", handleClickOutside);
-		};
-	}, [dropdownOpened]);
-	const handleDayClick = (date) => {
-		/* istanbul ignore next - react-day-picker rarely calls onSelect(undefined) in our configuration */
-		if (!date) return;
-		handleClosePopover();
-		setNewMonth(date);
-		setSelected(date);
-		onChange?.(date);
-	};
-	const isDateSelected = (day) => {
-		/* istanbul ignore next - defensive null guard */
-		if (!selected || !day) return false;
-		const d1 = new Date(day?.date);
-		const d2 = new Date(selected);
-		d1.setHours(0, 0, 0, 0);
-		d2.setHours(0, 0, 0, 0);
-		return d1.getTime() === d2.getTime();
-	};
-	const handleClosePopover = () => {
-		popoverRef.current?.closePopover();
-	};
-	const isDateToday = (day) => {
-		/* istanbul ignore next - defensive null guard */
-		if (!day) return false;
-		const d1 = new Date(day?.date);
-		const d2 = new Date(today);
-		d1.setHours(0, 0, 0, 0);
-		d2.setHours(0, 0, 0, 0);
-		return d1.getTime() === d2.getTime();
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Popover, {
-		style: "minimal",
-		className: "w-full",
-		ref: popoverRef,
-		content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_day_picker.DayPicker, {
-			...className && { className },
-			mode: "single",
-			selected,
-			onSelect: handleDayClick,
-			locale: renderLocale(),
-			fixedWeeks: true,
-			endMonth: (0, date_fns.addMonths)(today, 13),
-			captionLayout: "dropdown",
-			onMonthChange: (newMonth$1) => setNewMonth(newMonth$1),
-			showOutsideDays: true,
-			disabled: disabledFrom ? { before: disabledFrom } : disabledUntil ? { after: disabledUntil } : undefined,
-			classNames: {
-				month_grid: "mt-3 max-w-[400px] border-t border-gray-100",
-				month_caption: "text-sm font-bold",
-				dropdowns: "flex items-center w-[190px] gap-1 left-0 justify-center h-8",
-				caption_label: "text-sm font-medium flex items-center justify-center w-[190px]",
-				chevron: "w-4 h-4 z-50",
-				nav: "absolute w-[190px] justify-between flex h-8 items-center",
-				nav_button: "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 cursor-pointer",
-				nav_button_previous: "absolute left-1",
-				nav_button_next: "absolute right-1",
-				day: "h-8 w-8 p-0 aria-selected:opacity-100 font-normal text-sm",
-				weekdays: "pt-12",
-				weekday: "text-gray-300 text-sm font-normal pt-4 pb-2",
-				day_today: "bg-accent text-accent-foreground",
-				day_outside: "day-outside text-gray-800  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
-				day_disabled: "text-gray-800",
-				day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
-				day_hidden: "invisible"
-			},
-			components: {
-				DayButton: (props) => {
-					const { day,...buttonProps } = props;
-					const { goToMonth } = (0, react_day_picker.useDayPicker)();
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						...buttonProps,
-						className: (0, clsx.default)("m-1 size-8 text-black transition-all duration-100 ease-in-out", "md:hover:bg-gradient-calendar hover:rounded md:hover:text-white", isDateSelected(day) && "bg-gradient-calendar rounded text-sm font-normal text-white", isDateToday(day) && "border-b-primary border border-transparent", "translate-y-0 active:translate-y-0.5"),
-						onClick: () => {
-							goToMonth(day.date);
-							handleDayClick(day.date);
-						}
-					});
-				},
-				Dropdown: (props) => {
-					const { goToMonth, months } = (0, react_day_picker.useDayPicker)();
-					const { className: dropdownClassName } = props;
-					const today$1 = new Date();
-					/* istanbul ignore next - react-day-picker may not pass this className in our test env */
-					if (dropdownClassName === "rdp-months_dropdown") {
-						const selectedYear = newMonth.getFullYear();
-						const selectItems = Array.from({ length: 12 }, (_, i) => {
-							const monthDate = (0, date_fns.setMonth)(new Date(selectedYear, i), i);
-							return {
-								value: i.toString(),
-								label: (0, date_fns.format)(monthDate, "MMMM", { locale: renderLocale() })
-							};
-						});
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "relative",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "cursor-pointer",
-								onClick: () => setDropdownOpened({
-									...dropdownOpened,
-									month: !dropdownOpened.month,
-									year: false
-								}),
-								children: (0, date_fns.format)(newMonth, "MMMM", { locale: renderLocale() })
-							}), dropdownOpened.month && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								ref: dropdownRef,
-								className: "shadow-dropdown absolute z-70 rounded-md border border-gray-50 bg-white",
-								children: selectItems.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									onClick: () => {
-										const newDate = new Date(selectedYear, parseInt(item.value));
-										goToMonth(newDate);
-										setDropdownOpened({
-											month: false,
-											year: false
-										});
-									},
-									className: "z-70 cursor-pointer border-b border-gray-50 bg-white px-4 py-1 font-normal text-black transition duration-200 ease-out hover:bg-gray-50",
-									children: item.label
-								}, item.value))
-							})]
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-							variant: "secondary",
-							type: "button",
-							className: "absolute top-4 right-4 z-10 h-8 px-3 text-xs font-normal",
-							onClick: () => {
-								goToMonth(today$1);
-								handleDayClick(today$1);
-							},
-							children: todayText
-						})] });
-					} else if (dropdownClassName === "rdp-years_dropdown") {
-						const earliestYear = new Date().getFullYear() - minimalDropdownYears;
-						const latestYear = new Date().getFullYear() + 1;
-						/* istanbul ignore else - defensive guard will always be truthy */
-						if (earliestYear && latestYear) {
-							const years = Array.from({ length: latestYear - earliestYear + 1 }, (_, i) => earliestYear + i).reverse();
-							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "relative",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "cursor-pointer",
-									onClick: () => setDropdownOpened({
-										...dropdownOpened,
-										year: !dropdownOpened.year,
-										month: false
-									}),
-									children: (0, date_fns.format)(newMonth, "yyyy", { locale: renderLocale() })
-								}), dropdownOpened.year && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									ref: dropdownRef,
-									className: "shadow-dropdown absolute z-70 rounded-md border border-gray-50 bg-white max-h-64 overflow-y-auto",
-									children: years.map((year) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										onClick: () => {
-											const newDate = months?.[0]?.date || new Date();
-											newDate.setFullYear(year);
-											goToMonth(newDate);
-											setDropdownOpened({
-												month: false,
-												year: false
-											});
-										},
-										className: "z-70 cursor-pointer border-b border-gray-50 px-4 py-1 font-normal text-black transition duration-200 ease-out hover:bg-gray-50",
-										children: year
-									}, year))
-								})]
-							});
-						}
-					}
-					/* istanbul ignore next - fallback path only when react-day-picker passes unknown className */
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {});
-				}
-			}
-		}) }),
-		placement: "bottom-start",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			"data-component": "datePickerInput",
-			className: cn("relative", className),
-			children: [
-				label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-					className: "mb-2 flex items-center gap-1 text-xs font-medium",
-					children: label
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
-					variant: "outline",
-					type: "button",
-					disabled,
-					className: cn(
-						"flex h-10 w-full items-center justify-start bg-gray-50 px-3 text-black",
-						/* istanbul ignore next - cosmetic class toggle */
-						{ "border-red-500 text-red-500": error }
-					),
-					onClick: () => setNewMonth(today),
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "text-sm font-normal text-nowrap text-black",
-							children: selected ? selected.toLocaleDateString() : placeholder
-						}),
-						selected !== undefined && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "cursor-pointer text-sm font-normal text-gray-800",
-							onClick: () => {
-								setSelected(undefined);
-								onChange?.(undefined);
-							},
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {})
-						}) })
-					]
-				}),
-				error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", {
-					className: "text-xs font-normal text-red-500",
-					children: error
-				})
-			]
-		})
-	});
-};
-
-//#endregion
-//#region src/components/favouriteButton/index.tsx
-const FavouriteButton = (0, react.forwardRef)((props, ref) => {
-	const { onClick, favourite, iconFilled, iconOutline, favouriteTitle, iconColorSelected = "text-pink", iconColor = "text-gray-800", iconSize, className = "", styleVariant = "transparent", children,...rest } = props;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionIcon, {
-		onClick,
-		"data-component": "favouriteButton",
-		title: favouriteTitle || "Favorite",
-		styleVariant,
-		className: `${favourite ? iconColorSelected : iconColor} ${className}`.trim(),
-		iconSize,
-		ref,
-		icon: favourite ? iconFilled ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {}) : iconOutline ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {}),
-		...rest,
-		children
-	});
-});
-
-//#endregion
-//#region src/components/unstyledButton/index.tsx
-const UnstyledButton = (0, react.forwardRef)(({ className,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-	type: "button",
-	"data-component": "unstyledButton",
-	className: cn("appearance-none", className),
-	ref,
-	...props
-}));
-UnstyledButton.displayName = "UnstyledButton";
-
-//#endregion
-//#region src/components/filters/FilterButton.tsx
-const FilterButton$1 = ({ onClick, hasFilters, reset, filtersText, resetText }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-	className: "flex gap-3",
-	"data-testid": "filterButton",
-	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-		onClick,
-		variant: "secondary",
-		className: "font-normal md:font-normal",
-		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {}),
-		children: filtersText
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnstyledButton, {
-		className: "text-sm font-normal disabled:text-gray-500",
-		onClick: reset,
-		disabled: !hasFilters,
-		children: resetText
-	})]
-});
-
-//#endregion
-//#region src/components/filters/FilterItem.tsx
-const FilterItem = ({ title, isActive = false, onClick }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-	className: cn("has-checked:border-primary has-checked:bg-turquoise-100 flex cursor-pointer items-center gap-3 rounded-full border border-gray-200 px-7 py-1.5 text-sm leading-6 font-normal transition-all duration-300 ease-in-out hover:bg-gray-50"),
-	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-		type: "checkbox",
-		className: "hidden",
-		onChange: onClick,
-		checked: isActive
-	}), title]
-});
-
-//#endregion
-//#region src/components/filters/index.tsx
-const Filters = ({ filters, setFilters, selectedFilters, selectedFiltersText, filtersText, resetText }) => {
-	const content = (0, react.useRef)(null);
-	const [showFilters, setShowFilters] = (0, react.useState)(false);
-	const onFilter = (filter) => {
-		if (selectedFilters.includes(filter)) setFilters(selectedFilters.filter((f) => f !== filter));
-		else setFilters([...selectedFilters, filter]);
-	};
-	(0, react.useEffect)(() => {
-		setShowFilters(selectedFilters.length > 0);
-	}, [selectedFilters]);
-	const onReset = () => {
-		setFilters([]);
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "grid justify-end gap-3",
-		"data-testid": "filters-component",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-center justify-end gap-3",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-sm font-medium",
-				"data-testid": "filters-title",
-				children: selectedFiltersText
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterButton$1, {
-				onClick: () => setShowFilters(!showFilters),
-				hasFilters: selectedFilters.length > 0,
-				reset: () => onReset(),
-				filtersText,
-				resetText
-			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			ref: content,
-			"data-testid": "filters-items-container",
-			"data-visible": showFilters,
-			className: cn("flex flex-wrap justify-end gap-2 overflow-hidden opacity-0 ease-in-out [transition:max-height_0.4s,opacity_0.3s]", showFilters && "opacity-100"),
-			style: { maxHeight: showFilters ? `${content?.current?.scrollHeight}px` : "0px" },
-			children: filters.map((filter) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterItem, {
-				title: filter,
-				isActive: selectedFilters.includes(filter),
-				onClick: () => onFilter(filter)
-			}, filter))
-		})]
-	});
-};
-
-//#endregion
-//#region src/components/hamburgerMenuButton/index.tsx
-const HamburgerMenuButton = (0, react.forwardRef)(({ menuState, setMenuState }, ref) => {
-	const defaultClasses = cn("absolute h-[2px] bg-white duration-150");
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(UnstyledButton, {
-		onClick: setMenuState,
-		className: "relative h-4 w-6",
-		name: "hamburgerMenuButton",
-		"data-component": "hamburgerMenuButton",
-		"aria-label": "Mobile Menu button",
-		ref,
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				"data-testid": "hamburger-line-top",
-				className: cn(defaultClasses, "top-0 left-0 w-6", { "translation top-1/2 translate-y-[-50%] rotate-45 transform duration-150 ease-in": menuState })
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				"data-testid": "hamburger-line-middle",
-				className: cn(defaultClasses, "top-1/2 right-0 w-4 translate-y-[-50%]", { "translation opacity-0 ease-in": menuState })
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				"data-testid": "hamburger-line-bottom",
-				className: cn(defaultClasses, "bottom-0 left-0 w-6", { "translation top-1/2 translate-y-[-50%] -rotate-45 transform duration-150 ease-in": menuState })
-			})
-		]
-	});
-});
-HamburgerMenuButton.displayName = "HamburgerMenuButton";
-
-//#endregion
-//#region src/components/island/index.tsx
-const Island = ({ children, className, noShadow = false, noPadding = false,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	"data-testid": "island",
-	"data-component": "island",
-	className: cn("relative bg-white px-5 py-5 md:px-10 md:py-9", {
-		"shadow-[0_-0.5rem_2rem_rgba(38,41,92,0.04)]": !noShadow,
-		"drop-shadow-none": noShadow,
-		"md:px-0 md:py-0": noPadding
-	}, className),
-	...props,
-	children
-});
-Island.displayName = "Island";
-
-//#endregion
-//#region src/components/modal/index.tsx
-const Modal = ({ title, children, withCloseButton = true, opened, additionalClassNames, closeModalWithConfirmation = false, gradient = true, uncloseAble = false, confirmText = "Are you sure you want to close this modal?", dataTestId, onClose, size }) => {
-	const ref = (0, react.useRef)(null);
-	const refContainer = (0, react.useRef)(null);
-	const [isOpen, setIsOpen] = (0, react.useState)(false);
-	(0, react.useEffect)(() => {
-		setIsOpen(opened);
-	}, [opened]);
-	const handleClose = (0, react.useCallback)(() => {
-		if (uncloseAble) return;
-		if (closeModalWithConfirmation) {
-			if (window.confirm(confirmText)) {
-				setIsOpen(false);
-				onClose();
-			}
-		} else {
-			setIsOpen(false);
-			onClose();
-		}
-	}, [
-		closeModalWithConfirmation,
-		onClose,
-		uncloseAble
-	]);
-	const handleClickOutside = (0, react.useCallback)((event) => {
-		if (refContainer.current && refContainer.current.contains(event.target)) {
-			if (ref.current && !ref.current.contains(event.target)) handleClose();
-		}
-	}, [handleClose]);
-	const handleEscapeKey = (0, react.useCallback)((event) => {
-		if (event.code === "Escape") handleClose();
-	}, [handleClose]);
-	(0, react.useEffect)(() => {
-		if (isOpen) {
-			document.addEventListener("mousedown", handleClickOutside);
-			window.addEventListener("keydown", handleEscapeKey);
-		}
-		return () => {
-			document.removeEventListener("mousedown", handleClickOutside);
-			window.removeEventListener("keydown", handleEscapeKey);
-		};
-	}, [
-		handleClickOutside,
-		handleClose,
-		handleEscapeKey,
-		isOpen,
-		onClose,
-		opened,
-		ref
-	]);
-	if (!isOpen) return null;
-	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: cn("fixed top-0 left-0 z-999 grid h-full w-full items-center overflow-y-scroll overscroll-contain px-4 py-10 md:py-20"),
-		"data-testid": dataTestId,
-		"data-component": "modal",
-		ref: refContainer,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "bg-navy-blue/40 fixed top-0 left-0 z-[-1] size-full",
-			"data-testid": "modalBg"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "relative flex w-full justify-center",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-				className: cn("relative h-full w-full max-w-[1000px] bg-white px-5 py-8 shadow-xl md:px-10 md:py-10", additionalClassNames, size),
-				ref,
-				role: "dialog",
-				tabIndex: -1,
-				"aria-modal": isOpen,
-				"aria-label": title,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "relative z-10 w-full",
-						children: withCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionIcon, {
-							onClick: handleClose,
-							"aria-label": "close modal",
-							className: "absolute top-0 right-0",
-							"data-testid": "close-modal",
-							icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {}),
-							title: "close Modal"
-						})
-					}),
-					title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "relative w-full pt-14",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
-							className: "mt-0 mb-8 text-left text-3xl font-bold",
-							children: title
-						})
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children }),
-					gradient && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", {
-						"data-testid": "modal-gradient",
-						className: "absolute bottom-0 left-0 mt-8 mb-0 h-2! w-full border-none",
-						style: { backgroundImage: "linear-gradient(90deg, var(--color-light-blue) 0%, var(--color-primary) 50.52%, var(--color-pink) 100%)" }
-					})
-				]
-			})
-		})]
-	}), document.body);
-};
-Modal.displayName = "Modal";
-
-//#endregion
-//#region src/components/numberField/index.tsx
-const NumberField = ({ name, value = 0, max, min = 0, isDisabled, id, className = "", label, error, onChange }) => {
-	const handleChange = (e) => {
-		const newValue = parseInt(e.target.value, 10);
-		onChange?.(newValue);
-	};
-	const handleIncrement = () => {
-		onChange?.(value + 1);
-	};
-	const handleDecrement = () => {
-		if (value > 0) onChange?.(value - 1);
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		"data-testid": "number-field-container",
-		className: `inline-flex flex-col ${className}`,
-		children: [
-			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-				htmlFor: id,
-				className: "mb-1 text-sm font-medium text-gray-700",
-				children: label
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: `has-focus:border-primary group relative flex w-[108px] items-center rounded-md border border-gray-300 ${error ? "border-red-300" : "border-gray-300"}`,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						onClick: handleDecrement,
-						disabled: isDisabled,
-						className: "absolute left-0 flex h-full w-8 items-center justify-center rounded-l-md border-r-0 bg-gray-50 text-gray-500 hover:bg-gray-100",
-						children: "-"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-						type: "number",
-						id,
-						name,
+						type: "number",
+						id,
+						name,
 						min,
 						max,
 						disabled: isDisabled,
@@ -8027,17 +7280,6 @@ const NumberField = ({ name, value = 0, max, min = 0, isDisabled, id, className
 	});
 };
 
-//#endregion
-//#region src/components/passwordInput/index.tsx
-const PasswordInput = react.default.forwardRef((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextInput, {
-	password: true,
-	enablePasswordManagerAutofill: true,
-	type: "password",
-	...props,
-	ref
-}));
-PasswordInput.displayName = "PasswordInput";
-
 //#endregion
 //#region src/components/progressBar/index.tsx
 const ProgressBar = ({ value, maxValue = 100, className }) => {
@@ -8211,195 +7453,91 @@ const ScrollToTop = ({ scrollToTopTitle }) => {
 		onClick: scrollToTop,
 		"data-tooltip-id": scrollToTopTitle,
 		"data-tooltip-content": scrollToTopTitle,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {})
+		children: "scroll to top"
 	}) });
 };
 
 //#endregion
-//#region src/components/searchInput/index.tsx
-const SearchInput = ({ placeholder, value, onChange, className, rightSection,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextInput, {
-	placeholder,
-	className: className || "w-full lg:w-auto lg:min-w-[23.75rem]",
-	rightSection: rightSection || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {}),
-	value,
-	onChange,
-	...props
-});
-
-//#endregion
-//#region src/components/select/index.tsx
-const LANGUAGE_FLAGS = [
-	{
-		value: "nl-NL",
-		altValue: "nl_NL",
-		label: "nl"
-	},
-	{
-		value: "nl-BE",
-		altValue: "nl_BE",
-		label: "be"
-	},
-	{
-		value: "en-GB",
-		altValue: "en_GB",
-		label: "gb"
-	},
-	{
-		value: "fr-FR",
-		altValue: "fr_FR",
-		label: "fr"
-	}
-];
-const selectStyles = {
-	singleValue: (provided) => ({
-		...provided,
-		fontSize: "14px"
-	}),
-	placeholder: (provided) => ({
-		...provided,
-		color: "#838383",
-		fontSize: "14px",
-		textWrap: "nowrap"
-	}),
-	dropdownIndicator: (provided) => ({
-		...provided,
-		color: "black"
-	}),
-	option: (base, { isFocused, isSelected }) => ({
-		...base,
-		color: "black",
-		marginLeft: "4px",
-		marginRight: "4px",
-		backgroundColor: isSelected ? "#f8f8f8" : isFocused ? "#f8f8f8" : "transparent",
-		width: "calc(100% - 8px)",
-		cursor: "pointer"
-	}),
-	menuList: (provided) => ({
-		...provided,
-		fontSize: "14px"
-	})
-};
-const selectTheme = (theme) => ({
-	...theme,
-	borderRadius: 4,
-	colors: {
-		...theme.colors,
-		primary25: "#f8f8f8",
-		primary: "#f8f8f8"
-	}
-});
-const Select = (0, react.forwardRef)(({ options, placeholder, defaultValue, label, id, icon, error, className, labelClassNames, showLangFlags = false, hideErrorText = false, isClearable = true, fullWidth = true, width, isDisabled,...props }, ref) => {
-	const DropdownIndicator = (props$1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_select.components.DropdownIndicator, {
-		...props$1,
-		children: props$1.hasValue && isClearable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-			"data-testid": "icon-x",
-			className: "cursor-pointer",
-			color: "black",
-			onClick: () => props$1.clearValue()
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", { color: "black" })
-	});
-	const GroupHeading = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-stretch px-4 py-2 font-normal text-[#838383] capitalize",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "flex-nowrap whitespace-nowrap",
-			children
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "ml-2 flex w-full flex-1 items-center justify-center",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-px w-full bg-[#838383]" })
-		})]
-	});
-	const LanguageControl = (props$1) => {
-		const getSelectedFlag = () => {
-			const selectValue = props$1.selectProps.value;
-			const findFlag = (value) => LANGUAGE_FLAGS.find((e) => e.value === value || e.altValue === value)?.label || "";
-			if (typeof selectValue === "string") return findFlag(selectValue);
-			if (typeof selectValue === "object" && selectValue !== null && "value" in selectValue) return findFlag(selectValue.value);
-			return null;
-		};
-		const selectedFlag = getSelectedFlag();
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_select.components.Control, {
-			...props$1,
-			children: [selectedFlag && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex h-[39px] items-center border-r border-gray-200 p-3",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-					src: `/images/countries/${selectedFlag.toUpperCase()}_flag.svg`,
-					alt: "",
-					width: 24,
-					height: 24
-				})
-			}), props$1.children]
-		});
-	};
-	const NoOptionsMessage = (props$1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_select.components.NoOptionsMessage, {
-		...props$1,
-		children: "noOptionsMessage"
-	});
-	const SingleValue = (props$1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_select.components.SingleValue, {
-		...props$1,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			className: "flex items-center",
-			children: [icon && icon, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "mx-2",
-				children: props$1.children
-			})]
-		})
-	});
+//#region src/components/textInput/index.tsx
+const TextInput = react.default.forwardRef(({ rightSection, leftSection, className, error, autoFocus, label, maxLength, enablePasswordManagerAutofill = false, onBlur, disabled, loadingState, onKeyDown, min = "0", max, autoComplete, showRightSection = true, step, wrapperClassName, password = false,...props }, ref) => {
+	const [showPassword, setShowPassword] = react.default.useState(false);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		"data-component": "Select",
-		"data-testid": "select-container",
-		ref,
-		className: (0, clsx.default)("m-0 grid gap-2 p-0", width ? width : fullWidth && "w-full", className),
+		"data-component": "TextInput",
+		"data-testid": "TextInput",
+		className: (0, clsx.default)("relative", wrapperClassName),
 		children: [
-			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
-				className: cn("leading-4", labelClassNames),
+			typeof label === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				htmlFor: props["id"],
+				className: "mb-2 flex items-center gap-1 text-xs font-medium text-black",
 				children: label
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_select.default, {
-				"data-component": "select",
-				"data-testid": "select-input",
-				options,
-				menuPlacement: "auto",
-				isDisabled,
-				defaultValue,
-				placeholder,
-				isClearable: false,
-				menuPortalTarget: document?.body,
-				styles: {
-					...selectStyles,
-					control: (base, state) => ({
-						...base,
-						"&:hover": { borderColor: "#A8A8A8" },
-						height: "40px",
-						width: "100%",
-						backgroundColor: "#fbfbfb",
-						borderColor: error ? "red" : state.isFocused ? "#10d1bb" : "#cccccc",
-						cursor: "pointer"
+			}) : label,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "relative",
+				children: [
+					leftSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: (0, clsx.default)("absolute top-0 left-0 flex h-10 w-12 content-center items-center justify-center align-middle text-sm font-medium text-black"),
+						children: leftSection
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						onBlur,
+						onKeyDown,
+						autoComplete,
+						min,
+						max,
+						autoFocus,
+						disabled,
+						step,
+						maxLength,
+						className: (0, clsx.default)(`${loadingState ? "cursor-not-allowed" : ""}`, `${disabled ? "text-gray-500" : "text-gray-900"} selection:bg-turquoise-200 focus:border-turquoise-500 focus:ring-turquoise-500 active:border-turquoise-500 active:ring-turquoise-500 h-10 w-full rounded-[4px] border border-gray-200 bg-gray-50 px-3 text-sm font-normal outline-hidden ${rightSection && "pr-12"} ${leftSection && "pl-12"} ${error && "border-red-500 text-red-500 selection:bg-red-200 focus:border-red-500 focus:ring-red-500 focus:placeholder:text-red-500 active:border-red-500 active:ring-red-500"}`, className),
+						"aria-busy": loadingState || undefined,
+						"data-lpignore": enablePasswordManagerAutofill ? undefined : "true",
+						"data-1p-ignore": enablePasswordManagerAutofill ? undefined : "true",
+						ref,
+						...props,
+						type: password ? showPassword ? "text" : "password" : "text"
+					}),
+					loadingState ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "absolute inset-y-0 right-0 flex h-10 w-12 content-center items-center justify-center align-middle text-sm font-medium text-black",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconAlert, {
+							className: "h-4 w-4 animate-spin text-gray-500",
+							"aria-label": "Loading"
+						})
+					}) : rightSection && showRightSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "absolute inset-y-0 right-0 flex h-10 w-12 content-center items-center justify-center align-middle text-sm font-medium text-black",
+						children: rightSection
 					}),
-					menuPortal: (base) => ({
-						...base,
-						zIndex: 99999
+					password && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "absolute inset-y-0 right-4 flex content-center items-center justify-center align-middle text-sm font-medium text-black",
+						children: showPassword ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+							"data-testid": "password-visibility-toggle",
+							className: "cursor-pointer text-gray-500",
+							onClick: () => setShowPassword(false)
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+							"data-testid": "password-visibility-toggle",
+							className: "cursor-pointer text-gray-500",
+							onClick: () => setShowPassword(true)
+						})
 					})
-				},
-				theme: selectTheme,
-				components: {
-					IndicatorSeparator: () => null,
-					DropdownIndicator,
-					GroupHeading,
-					Control: showLangFlags ? LanguageControl : react_select.components.Control,
-					SingleValue,
-					NoOptionsMessage
-				},
-				...props
-			}, id),
-			!hideErrorText && error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", {
-				className: "text-xs font-normal text-red-500",
-				role: "alert",
+				]
+			}),
+			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mt-2 text-xs font-normal text-red-500",
 				children: error
 			})
 		]
 	});
 });
-Select.displayName = "Select";
+
+//#endregion
+//#region src/components/searchInput/index.tsx
+const SearchInput = ({ placeholder, value, onChange, className, rightSection,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextInput, {
+	placeholder,
+	className: className || "w-full lg:w-auto lg:min-w-[23.75rem]",
+	rightSection: rightSection || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {}),
+	value,
+	onChange,
+	...props
+});
 
 //#endregion
 //#region src/components/skeleton/index.tsx
@@ -8409,21 +7547,6 @@ const Skeleton = ({ className, "data-testid": dataTestId }) => /* @__PURE__ */ (
 	className: cn("inline-block rounded-md", "animate-pulse bg-gray-100/50", className)
 });
 
-//#endregion
-//#region src/components/skillPill/index.tsx
-const SkillPill = ({ name, number }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-	"data-testid": "skill-pill-container",
-	className: "flex items-center rounded-full border border-gray-200 p-[3px]",
-	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: "pr-4 pl-3",
-		children: name
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		"data-testid": "skill-pill-number",
-		className: "bg-turquoise-200 grid h-[30px] min-w-[30px] place-content-center rounded-full px-2.5",
-		children: number
-	})]
-});
-
 //#endregion
 //#region src/components/stickyMobileButton/index.tsx
 const StickyMobileButtonWrapper = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -8496,99 +7619,6 @@ function TableRow({ children, className, header,...props }) {
 	});
 }
 
-//#endregion
-//#region src/components/tabs/Tab.tsx
-const Tab = (0, react.forwardRef)(({ tabId, activeTab, tabContent, clickFnc, rightSection }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-	ref,
-	"data-testid": `tab-${tabId}`,
-	className: `${activeTab && "text-light-blue bg-[#F0F0F6]"} bg-ultra-light-blue px-5 py-[10px] text-xs font-normal whitespace-nowrap text-black transition-colors duration-100 hover:border-black hover:bg-[#F0F0F6] data-active:border-black data-active:bg-[#F0F0F6] data-active:font-medium data-active:text-black`,
-	onClick: () => clickFnc(tabId),
-	children: [tabContent, rightSection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: "ml-2 inline-flex",
-		children: rightSection
-	})]
-}));
-
-//#endregion
-//#region src/components/tabs/TabsBadge.tsx
-const TabsBadge = ({ children }) => {
-	const isCircular = typeof children === "number" && children <= 9 || typeof children === "string" && children.length === 1 || false;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-testid": "tabs-badge",
-		className: (0, clsx.default)("bg-pink h-5 rounded-full text-xs leading-5 font-medium text-white", {
-			"w-5 text-center": isCircular,
-			"px-2": !isCircular
-		}),
-		children
-	});
-};
-TabsBadge.displayName = "TabsBadge";
-
-//#endregion
-//#region src/components/tabs/TabsWrapper.tsx
-const TabsWrapper = ({ setActiveTab, activeTab, tabs }) => {
-	const tabRefs = (0, react.useMemo)(() => {
-		const refs = {};
-		tabs?.forEach((tab) => {
-			refs[tab.value] = (0, react.createRef)();
-		});
-		return refs;
-	}, [tabs]);
-	const [underlineStyle, setUnderlineStyle] = (0, react.useState)({
-		width: 0,
-		left: 0
-	});
-	(0, react.useEffect)(() => {
-		if (activeTab && tabRefs[activeTab]?.current) {
-			const activeTabElement = tabRefs[activeTab].current;
-			setUnderlineStyle({
-				width: activeTabElement?.offsetWidth || 0,
-				left: activeTabElement?.offsetLeft || 0
-			});
-		}
-	}, [activeTab, tabRefs]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "w-full",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "relative inline-block w-auto border-b-[3px] border-gray-200",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex",
-				children: tabs && tabs?.map((tab) => tab.requiredPermissions ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabContent, {
-					tab,
-					ref: tabRefs[tab.value],
-					setActiveTab,
-					activeTab
-				}, tab.value) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabContent, {
-					tab,
-					ref: tabRefs[tab.value],
-					setActiveTab,
-					activeTab
-				}, tab.value))
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "absolute h-[3px] bg-gray-900 transition-all duration-300",
-				style: {
-					width: underlineStyle.width,
-					left: underlineStyle.left,
-					bottom: "-3px"
-				}
-			})]
-		})
-	});
-};
-const TabContent = (0, react.forwardRef)(({ tab, setActiveTab, activeTab }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tab, {
-	ref,
-	tabId: tab.value,
-	setActiveTab,
-	activeTab: activeTab === tab.value,
-	tabContent: tab.name,
-	rightSection: tab?.rightSection || undefined,
-	clickFnc: () => {
-		tab.clickFnc(tab.value);
-		setActiveTab(tab.value);
-	}
-}));
-TabContent.displayName = "TabContent";
-
 //#endregion
 //#region src/components/textArea/index.tsx
 const Textarea = (0, react.forwardRef)(({ className, label, error, rows = 8,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -8794,14 +7824,15 @@ const ProfileMenu = ({ title, metaTitle, icon, content, disabled = false, classN
 		ref: menuRef,
 		"data-context-menu-id": metaTitle,
 		"data-context-menu-content": metaTitle,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(UnstyledButton, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
 			ref: buttonRef,
 			id: buttonId,
 			"aria-label": "Toggle profile menu",
 			"aria-expanded": isOpen,
 			"aria-haspopup": "menu",
 			"aria-controls": isOpen ? menuId : undefined,
-			className: cn(buttonVariants["secondary"], defaultStyling, classNames?.button),
+			variant: "secondary",
+			className: cn(defaultStyling, classNames?.button),
 			disabled,
 			onClick: handleToggle,
 			children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -8815,13 +7846,14 @@ const ProfileMenu = ({ title, metaTitle, icon, content, disabled = false, classN
 			className: cn("absolute right-0 z-10 mt-2 w-auto min-w-[200px] rounded-md border-[0.0625rem] border-gray-200 bg-white p-1 shadow-md", classNames?.menu),
 			children: content.map(
 				/* istanbul ignore next - render callback not meaningful for unit coverage */
-				(c, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnstyledButton, {
+				(c, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 					ref: (el) => {
 						menuItemRefs.current[index] = el;
 					},
 					role: "menuitem",
 					tabIndex: -1,
 					onClick: () => handleItemClick(c.onClick),
+					variant: "unstyled",
 					className: cn("w-full rounded-md px-4 py-2 text-left text-sm font-normal whitespace-nowrap transition-colors", "focus:ring-primary hover:bg-gray-50 focus:bg-gray-50 focus:ring focus:outline-none focus:ring-inset", c.disabled && "cursor-not-allowed opacity-50", focusedIndex === index && "bg-gray-50"),
 					"aria-label": c.title,
 					disabled: c.disabled,
@@ -9902,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;
@@ -9914,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;
@@ -9926,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", {
@@ -9957,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" })
 			})
 		})
 	});
@@ -10024,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
@@ -10513,10 +9552,10 @@ const GiftCard = ({ className, amount, amountTotal, cardNumber, validUntilDate,.
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "font-bold gift-card-amount",
-						children: setCurrencyValue(amount || "0")
+						children: setCurrencyValue(String(amount || "0"))
 					}),
 					" / ",
-					setCurrencyValue(amountTotal || "0", false)
+					setCurrencyValue(String(amountTotal || "0"), false)
 				]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -11562,17 +10601,9 @@ RangeSlider.displayName = "RangeSlider";
 
 //#endregion
 exports.Accordion = Accordion;
-exports.ActionIcon = ActionIcon;
-exports.Alert = Alert;
-exports.AutoCompleteInput = AutoCompleteInput;
-exports.Avatar = Avatar;
-exports.AvatarIndicator = AvatarIndicator;
-exports.Badge = Badge;
-exports.BigBadge = BigBadge;
 exports.BlogWidget = BlogWidget;
 exports.BrandProvider = BrandProvider;
 exports.BrandTopMenu = BrandTopMenu;
-exports.BreadCrumb = BreadCrumb;
 exports.Button = Button;
 exports.CSS_VARIABLE_KEYS = CSS_VARIABLE_KEYS;
 exports.Calendar = Calendar;
@@ -11582,10 +10613,8 @@ exports.Checkbox = Checkbox;
 exports.Collection = Collection;
 exports.CounterIcon = CounterIcon;
 exports.Coupon = Coupon;
-exports.DatePickerInput = DatePickerInput;
 exports.Divider = Divider;
 exports.Dropdown = Dropdown;
-exports.FavouriteButton = FavouriteButton;
 exports.FilterButton = FilterButton;
 exports.Filters = Filters;
 exports.FlightSwitch = FlightSwitch;
@@ -11630,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;
@@ -11665,7 +10695,6 @@ exports.IconWatched = IconWatched;
 exports.IconWhatsapp = IconWhatsapp;
 exports.IconWinterSport = IconWinterSport;
 exports.IconWinterSun = IconWinterSun;
-exports.Island = Island;
 exports.Label = Label;
 exports.LinkBox = LinkBox;
 exports.Loading = Loading;
@@ -11674,15 +10703,12 @@ exports.Map = Map;
 exports.MatrixTable = MatrixTable;
 exports.Menu = Menu;
 exports.MiddleNavigation = MiddleNavigation;
-exports.Modal = Modal;
 exports.Nominations = Nominations;
 exports.NumberField = NumberField;
 exports.PageNavigation = PageNavigation;
 exports.PageRating = PageRating;
-exports.PasswordInput = PasswordInput;
 exports.PhoneNumberInput = PhoneNumberInput;
 exports.PhotoCardsRotated = PhotoCardsRotated;
-exports.Popover = Popover;
 exports.PriceBox = PriceBox;
 exports.PriceCheck = PriceCheck;
 exports.ProfileMenu = ProfileMenu;
@@ -11702,9 +10728,7 @@ exports.SearchBlock = SearchBlock;
 exports.SearchBox = SearchBox;
 exports.SearchBoxResults = SearchBoxResults;
 exports.SearchInput = SearchInput;
-exports.Select = Select;
 exports.Skeleton = Skeleton;
-exports.SkillPill = SkillPill;
 exports.Slider = Slider;
 exports.Spotlights = Spotlights;
 exports.Stepper = Stepper;
@@ -11716,8 +10740,6 @@ exports.TableHeader = TableHeader;
 exports.TableHeaderItem = TableHeaderItem;
 exports.TableHeaderRow = TableHeaderRow;
 exports.TableRow = TableRow;
-exports.TabsBadge = TabsBadge;
-exports.TabsWrapper = TabsWrapper;
 exports.TextInput = TextInput;
 exports.Textarea = Textarea;
 exports.TimeInput = TimeInput;
@@ -11728,7 +10750,6 @@ exports.TransportToggle = TransportToggle;
 exports.TruncatedText = TruncatedText;
 exports.UnorderedList = UnorderedList;
 exports.UnorderedListItem = UnorderedListItem;
-exports.UnstyledButton = UnstyledButton;
 exports.Usp = Usp;
 exports.ViewedAccomodations = ViewedAccomodations;
 exports.WarningText = WarningText;