@prijsvrijtechsupport/ui 0.0.47 → 0.0.48

package/dist/index.js

@@ -2,19 +2,15 @@
 
 
 import * as React$1 from "react";
-import React, { Fragment, cloneElement, createContext, createRef, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { Fragment, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { useInView } from "react-intersection-observer";
 import moment from "moment";
 import useEmblaCarousel from "embla-carousel-react";
-import { DayPicker, useDayPicker } from "react-day-picker";
-import { addMonths, differenceInMinutes, format, parse, setMonth } from "date-fns";
-import { enGB, fr, nl, nlBE } from "date-fns/locale";
-import { autoUpdate, flip, offset, shift, useClick, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole } from "@floating-ui/react";
-import { createPortal } from "react-dom";
-import ReactSelect, { components } from "react-select";
+import { differenceInMinutes, format, parse } from "date-fns";
+import { nl } from "date-fns/locale";
 
 //#region src/jsx-runtime-shim.ts
 const jsx$1 = React$1.createElement;
@@ -7027,702 +7023,6 @@ 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 = forwardRef(({ title, disabled = false, styleVariant = "default", icon, type = "button", "data-testid": testId, iconSize = 20, strokeWidth = 1, onClick, className,...props }, ref) => {
-	const variantClassNames = clsx({
-		"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__ */ jsx(Fragment$1, { children: /* @__PURE__ */ 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),
-		onClick,
-		ref,
-		"data-tooltip-id": title,
-		"data-tooltip-content": title,
-		...props,
-		children: icon ? formatIcon(icon, {
-			stroke: strokeWidth,
-			size: iconSize
-		}) : props["children"]
-	}) });
-});
-ActionIcon.displayName = "ActionIcon";
-
-//#endregion
-//#region src/components/alert/index.tsx
-const Alert = ({ show, message, type, plain = false, className }) => {
-	const [showAlert, setShowAlert] = useState();
-	const icon = () => {
-		if (plain) return null;
-		switch (type) {
-			case "warning": return /* @__PURE__ */ jsx("svg", {
-				className: "text-warning hidden md:block",
-				"data-testid": "alert-circle-icon"
-			});
-			case "error": return /* @__PURE__ */ jsx("svg", {
-				className: "hidden text-red-500 md:block",
-				"data-testid": "alert-circle-icon"
-			});
-			case "success": return /* @__PURE__ */ jsx("svg", {
-				className: "text-green hidden md:block",
-				"data-testid": "check-circle-icon"
-			});
-		}
-	};
-	useEffect(() => {
-		setShowAlert(show);
-	}, [show]);
-	if (!showAlert) return null;
-	return /* @__PURE__ */ 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__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("div", {
-			className: "flex md:items-center",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "flex md:items-center",
-				children: icon()
-			}), /* @__PURE__ */ jsx("p", {
-				className: `m-0 font-medium text-black ${plain ? "" : "md:ml-5"}`,
-				children: message
-			})]
-		}) })
-	});
-};
-Alert.displayName = "Alert";
-
-//#endregion
-//#region src/components/textInput/index.tsx
-const TextInput = React.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.useState(false);
-	return /* @__PURE__ */ jsxs("div", {
-		"data-component": "TextInput",
-		"data-testid": "TextInput",
-		className: clsx("relative", wrapperClassName),
-		children: [
-			typeof label === "string" ? /* @__PURE__ */ jsx("label", {
-				htmlFor: props["id"],
-				className: "mb-2 flex items-center gap-1 text-xs font-medium text-black",
-				children: label
-			}) : label,
-			/* @__PURE__ */ jsxs("div", {
-				className: "relative",
-				children: [
-					leftSection && /* @__PURE__ */ jsx("div", {
-						className: clsx("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__ */ jsx("input", {
-						onBlur,
-						onKeyDown,
-						autoComplete,
-						min,
-						max,
-						autoFocus,
-						disabled,
-						step,
-						maxLength,
-						className: clsx(`${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__ */ 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__ */ jsx(IconAlert, {
-							className: "h-4 w-4 animate-spin text-gray-500",
-							"aria-label": "Loading"
-						})
-					}) : rightSection && showRightSection && /* @__PURE__ */ 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__ */ 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__ */ jsx("svg", {
-							"data-testid": "password-visibility-toggle",
-							className: "cursor-pointer text-gray-500",
-							onClick: () => setShowPassword(false)
-						}) : /* @__PURE__ */ jsx("svg", {
-							"data-testid": "password-visibility-toggle",
-							className: "cursor-pointer text-gray-500",
-							onClick: () => setShowPassword(true)
-						})
-					})
-				]
-			}),
-			error && /* @__PURE__ */ 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__ */ jsxs("div", {
-	className: "relative mb-8",
-	children: [/* @__PURE__ */ 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__ */ jsx("div", {
-	"data-component": "Avatar",
-	"data-testid": dataTestId,
-	children: src && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("span", {
-	"data-testid": "badge",
-	"data-component": "Badge",
-	className: clsx("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__ */ jsx("div", {
-			"data-testid": "left-section",
-			children: leftSection
-		}),
-		/* @__PURE__ */ jsx("span", {
-			"data-testid": "badge-content",
-			className: cn("block h-5 overflow-hidden text-ellipsis whitespace-nowrap", { "flex items-center": favorite }),
-			children
-		}),
-		rightSection && /* @__PURE__ */ 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__ */ 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__ */ jsx(LinkText, {
-	"data-component": "BreadCrumb",
-	classNames: "flex items-center",
-	children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("svg", { role: "img" }), /* @__PURE__ */ jsx("span", {
-		className: "flex items-center gap-5",
-		children
-	})] })
-});
-BreadCrumb.displayName = "BreadCrumb";
-
-//#endregion
-//#region src/components/popover/index.tsx
-const Popover = forwardRef(({ content, children, hoverEnabled = false, passedOpen = false, placement = "right", style = "card", isMobile = false, className }, ref) => {
-	const [isOpen, setIsOpen] = useState(passedOpen);
-	const mobileStyles = { width: `${style === "card" && "100%"}` };
-	const { refs, floatingStyles, context } = useFloating({
-		open: isOpen,
-		onOpenChange: setIsOpen,
-		placement: !isMobile ? placement : "bottom-start",
-		middleware: [
-			!isMobile && flip(),
-			!isMobile && shift(),
-			offset(() => ({
-				mainAxis: 15,
-				crossAxis: !isMobile ? 0 : 78
-			}))
-		],
-		whileElementsMounted: autoUpdate
-	});
-	const click = useClick(context, {
-		event: "click",
-		keyboardHandlers: true
-	});
-	const focus = useFocus(context);
-	const hover = useHover(context, { enabled: hoverEnabled });
-	const dismiss = useDismiss(context);
-	const role = useRole(context, { role: "tooltip" });
-	const interactions = [
-		click,
-		focus,
-		dismiss,
-		role,
-		hover
-	];
-	const { getReferenceProps, getFloatingProps } = useInteractions(interactions);
-	useImperativeHandle(ref, () => ({
-		closePopover: () => setIsOpen(false),
-		openPopover: () => setIsOpen(true),
-		togglePopover: () => setIsOpen((prev) => !prev)
-	}));
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("", { "[&>div]:border-navyBlue": isOpen }, className),
-		children: [isValidElement(children) && cloneElement(children, getReferenceProps({
-			ref: refs.setReference,
-			...getReferenceProps()
-		})), isOpen && /* @__PURE__ */ jsxs("div", {
-			ref: refs.setFloating,
-			style: {
-				...floatingStyles,
-				...isMobile && { ...mobileStyles }
-			},
-			...getFloatingProps(),
-			className: clsx("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__ */ jsx("div", {
-				className: "bg-linear-gradient-x pt-[3px]",
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "relative overflow-hidden bg-white p-5",
-					children: [!hoverEnabled && /* @__PURE__ */ jsx(ActionIcon, {
-						onClick: () => setIsOpen(false),
-						title: "",
-						icon: /* @__PURE__ */ 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] = useState(value);
-	const today = new Date();
-	const [newMonth, setNewMonth] = useState(selected || today);
-	const [dropdownOpened, setDropdownOpened] = useState({
-		month: false,
-		year: false
-	});
-	const locales = {
-		fr,
-		enGB,
-		nl,
-		nlBE
-	};
-	const dropdownRef = useRef(null);
-	const popoverRef = 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 */
-	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__ */ jsx(Popover, {
-		style: "minimal",
-		className: "w-full",
-		ref: popoverRef,
-		content: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(DayPicker, {
-			...className && { className },
-			mode: "single",
-			selected,
-			onSelect: handleDayClick,
-			locale: renderLocale(),
-			fixedWeeks: true,
-			endMonth: 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 } = useDayPicker();
-					return /* @__PURE__ */ jsx("button", {
-						type: "button",
-						...buttonProps,
-						className: clsx("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 } = 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 = setMonth(new Date(selectedYear, i), i);
-							return {
-								value: i.toString(),
-								label: format(monthDate, "MMMM", { locale: renderLocale() })
-							};
-						});
-						return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
-							className: "relative",
-							children: [/* @__PURE__ */ jsx("span", {
-								className: "cursor-pointer",
-								onClick: () => setDropdownOpened({
-									...dropdownOpened,
-									month: !dropdownOpened.month,
-									year: false
-								}),
-								children: format(newMonth, "MMMM", { locale: renderLocale() })
-							}), dropdownOpened.month && /* @__PURE__ */ jsx("div", {
-								ref: dropdownRef,
-								className: "shadow-dropdown absolute z-70 rounded-md border border-gray-50 bg-white",
-								children: selectItems.map((item) => /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", {
-								className: "relative",
-								children: [/* @__PURE__ */ jsx("span", {
-									className: "cursor-pointer",
-									onClick: () => setDropdownOpened({
-										...dropdownOpened,
-										year: !dropdownOpened.year,
-										month: false
-									}),
-									children: format(newMonth, "yyyy", { locale: renderLocale() })
-								}), dropdownOpened.year && /* @__PURE__ */ 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__ */ 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__ */ jsx(Fragment$1, {});
-				}
-			}
-		}) }),
-		placement: "bottom-start",
-		children: /* @__PURE__ */ jsxs("div", {
-			"data-component": "datePickerInput",
-			className: cn("relative", className),
-			children: [
-				label && /* @__PURE__ */ jsx("label", {
-					className: "mb-2 flex items-center gap-1 text-xs font-medium",
-					children: label
-				}),
-				/* @__PURE__ */ 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__ */ jsx("svg", {}),
-						/* @__PURE__ */ jsx("span", {
-							className: "text-sm font-normal text-nowrap text-black",
-							children: selected ? selected.toLocaleDateString() : placeholder
-						}),
-						selected !== undefined && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("span", {
-							className: "cursor-pointer text-sm font-normal text-gray-800",
-							onClick: () => {
-								setSelected(undefined);
-								onChange?.(undefined);
-							},
-							children: /* @__PURE__ */ jsx("svg", {})
-						}) })
-					]
-				}),
-				error && /* @__PURE__ */ jsx("small", {
-					className: "text-xs font-normal text-red-500",
-					children: error
-				})
-			]
-		})
-	});
-};
-
-//#endregion
-//#region src/components/favouriteButton/index.tsx
-const FavouriteButton = 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__ */ jsx(ActionIcon, {
-		onClick,
-		"data-component": "favouriteButton",
-		title: favouriteTitle || "Favorite",
-		styleVariant,
-		className: `${favourite ? iconColorSelected : iconColor} ${className}`.trim(),
-		iconSize,
-		ref,
-		icon: favourite ? iconFilled ?? /* @__PURE__ */ jsx("svg", {}) : iconOutline ?? /* @__PURE__ */ jsx("svg", {}),
-		...rest,
-		children
-	});
-});
-
-//#endregion
-//#region src/components/unstyledButton/index.tsx
-const UnstyledButton = forwardRef(({ className,...props }, ref) => /* @__PURE__ */ 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__ */ jsxs("div", {
@@ -7734,7 +7034,7 @@ const FilterButton$1 = ({ onClick, hasFilters, reset, filtersText, resetText })
 		className: "font-normal md:font-normal",
 		icon: /* @__PURE__ */ jsx("svg", {}),
 		children: filtersText
-	}), /* @__PURE__ */ jsx(UnstyledButton, {
+	}), /* @__PURE__ */ jsx(Button, {
 		className: "text-sm font-normal disabled:text-gray-500",
 		onClick: reset,
 		disabled: !hasFilters,
@@ -7804,8 +7104,9 @@ const Filters = ({ filters, setFilters, selectedFilters, selectedFiltersText, fi
 //#region src/components/hamburgerMenuButton/index.tsx
 const HamburgerMenuButton = forwardRef(({ menuState, setMenuState }, ref) => {
 	const defaultClasses = cn("absolute h-[2px] bg-white duration-150");
-	return /* @__PURE__ */ jsxs(UnstyledButton, {
+	return /* @__PURE__ */ jsxs(Button, {
 		onClick: setMenuState,
+		variant: "textButton",
 		className: "relative h-4 w-6",
 		name: "hamburgerMenuButton",
 		"data-component": "hamburgerMenuButton",
@@ -7829,122 +7130,6 @@ const HamburgerMenuButton = forwardRef(({ menuState, setMenuState }, ref) => {
 });
 HamburgerMenuButton.displayName = "HamburgerMenuButton";
 
-//#endregion
-//#region src/components/island/index.tsx
-const Island = ({ children, className, noShadow = false, noPadding = false,...props }) => /* @__PURE__ */ 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 = useRef(null);
-	const refContainer = useRef(null);
-	const [isOpen, setIsOpen] = useState(false);
-	useEffect(() => {
-		setIsOpen(opened);
-	}, [opened]);
-	const handleClose = useCallback(() => {
-		if (uncloseAble) return;
-		if (closeModalWithConfirmation) {
-			if (window.confirm(confirmText)) {
-				setIsOpen(false);
-				onClose();
-			}
-		} else {
-			setIsOpen(false);
-			onClose();
-		}
-	}, [
-		closeModalWithConfirmation,
-		onClose,
-		uncloseAble
-	]);
-	const handleClickOutside = useCallback((event) => {
-		if (refContainer.current && refContainer.current.contains(event.target)) {
-			if (ref.current && !ref.current.contains(event.target)) handleClose();
-		}
-	}, [handleClose]);
-	const handleEscapeKey = useCallback((event) => {
-		if (event.code === "Escape") handleClose();
-	}, [handleClose]);
-	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 createPortal(/* @__PURE__ */ 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__ */ jsx("div", {
-			className: "bg-navy-blue/40 fixed top-0 left-0 z-[-1] size-full",
-			"data-testid": "modalBg"
-		}), /* @__PURE__ */ jsx("div", {
-			className: "relative flex w-full justify-center",
-			children: /* @__PURE__ */ 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__ */ jsx("div", {
-						className: "relative z-10 w-full",
-						children: withCloseButton && /* @__PURE__ */ jsx(ActionIcon, {
-							onClick: handleClose,
-							"aria-label": "close modal",
-							className: "absolute top-0 right-0",
-							"data-testid": "close-modal",
-							icon: /* @__PURE__ */ jsx("svg", {}),
-							title: "close Modal"
-						})
-					}),
-					title && /* @__PURE__ */ jsx("div", {
-						className: "relative w-full pt-14",
-						children: /* @__PURE__ */ jsx("h2", {
-							className: "mt-0 mb-8 text-left text-3xl font-bold",
-							children: title
-						})
-					}),
-					/* @__PURE__ */ jsx("div", { children }),
-					gradient && /* @__PURE__ */ 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 }) => {
@@ -8005,17 +7190,6 @@ const NumberField = ({ name, value = 0, max, min = 0, isDisabled, id, className
 	});
 };
 
-//#endregion
-//#region src/components/passwordInput/index.tsx
-const PasswordInput = React.forwardRef((props, ref) => /* @__PURE__ */ 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 }) => {
@@ -8189,195 +7363,91 @@ const ScrollToTop = ({ scrollToTopTitle }) => {
 		onClick: scrollToTop,
 		"data-tooltip-id": scrollToTopTitle,
 		"data-tooltip-content": scrollToTopTitle,
-		children: /* @__PURE__ */ jsx("svg", {})
+		children: "scroll to top"
 	}) });
 };
 
 //#endregion
-//#region src/components/searchInput/index.tsx
-const SearchInput = ({ placeholder, value, onChange, className, rightSection,...props }) => /* @__PURE__ */ jsx(TextInput, {
-	placeholder,
-	className: className || "w-full lg:w-auto lg:min-w-[23.75rem]",
-	rightSection: rightSection || /* @__PURE__ */ jsx(Fragment$1, {}),
-	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 = 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__ */ jsx(components.DropdownIndicator, {
-		...props$1,
-		children: props$1.hasValue && isClearable ? /* @__PURE__ */ jsx("svg", {
-			"data-testid": "icon-x",
-			className: "cursor-pointer",
-			color: "black",
-			onClick: () => props$1.clearValue()
-		}) : /* @__PURE__ */ jsx("svg", { color: "black" })
-	});
-	const GroupHeading = ({ children }) => /* @__PURE__ */ jsxs("div", {
-		className: "flex items-stretch px-4 py-2 font-normal text-[#838383] capitalize",
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "flex-nowrap whitespace-nowrap",
-			children
-		}), /* @__PURE__ */ jsx("span", {
-			className: "ml-2 flex w-full flex-1 items-center justify-center",
-			children: /* @__PURE__ */ 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__ */ jsxs(components.Control, {
-			...props$1,
-			children: [selectedFlag && /* @__PURE__ */ jsx("div", {
-				className: "flex h-[39px] items-center border-r border-gray-200 p-3",
-				children: /* @__PURE__ */ jsx("img", {
-					src: `/images/countries/${selectedFlag.toUpperCase()}_flag.svg`,
-					alt: "",
-					width: 24,
-					height: 24
-				})
-			}), props$1.children]
-		});
-	};
-	const NoOptionsMessage = (props$1) => /* @__PURE__ */ jsx(components.NoOptionsMessage, {
-		...props$1,
-		children: "noOptionsMessage"
-	});
-	const SingleValue = (props$1) => /* @__PURE__ */ jsx(components.SingleValue, {
-		...props$1,
-		children: /* @__PURE__ */ jsxs("span", {
-			className: "flex items-center",
-			children: [icon && icon, /* @__PURE__ */ jsx("span", {
-				className: "mx-2",
-				children: props$1.children
-			})]
-		})
-	});
+//#region src/components/textInput/index.tsx
+const TextInput = React.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.useState(false);
 	return /* @__PURE__ */ jsxs("div", {
-		"data-component": "Select",
-		"data-testid": "select-container",
-		ref,
-		className: clsx("m-0 grid gap-2 p-0", width ? width : fullWidth && "w-full", className),
+		"data-component": "TextInput",
+		"data-testid": "TextInput",
+		className: clsx("relative", wrapperClassName),
 		children: [
-			label && /* @__PURE__ */ jsx(Label, {
-				className: cn("leading-4", labelClassNames),
+			typeof label === "string" ? /* @__PURE__ */ jsx("label", {
+				htmlFor: props["id"],
+				className: "mb-2 flex items-center gap-1 text-xs font-medium text-black",
 				children: label
-			}),
-			/* @__PURE__ */ jsx(ReactSelect, {
-				"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__ */ jsxs("div", {
+				className: "relative",
+				children: [
+					leftSection && /* @__PURE__ */ jsx("div", {
+						className: clsx("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__ */ jsx("input", {
+						onBlur,
+						onKeyDown,
+						autoComplete,
+						min,
+						max,
+						autoFocus,
+						disabled,
+						step,
+						maxLength,
+						className: clsx(`${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"
 					}),
-					menuPortal: (base) => ({
-						...base,
-						zIndex: 99999
+					loadingState ? /* @__PURE__ */ 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__ */ jsx(IconAlert, {
+							className: "h-4 w-4 animate-spin text-gray-500",
+							"aria-label": "Loading"
+						})
+					}) : rightSection && showRightSection && /* @__PURE__ */ 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__ */ 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__ */ jsx("svg", {
+							"data-testid": "password-visibility-toggle",
+							className: "cursor-pointer text-gray-500",
+							onClick: () => setShowPassword(false)
+						}) : /* @__PURE__ */ 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 : components.Control,
-					SingleValue,
-					NoOptionsMessage
-				},
-				...props
-			}, id),
-			!hideErrorText && error && /* @__PURE__ */ jsx("small", {
-				className: "text-xs font-normal text-red-500",
-				role: "alert",
+				]
+			}),
+			error && /* @__PURE__ */ 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__ */ jsx(TextInput, {
+	placeholder,
+	className: className || "w-full lg:w-auto lg:min-w-[23.75rem]",
+	rightSection: rightSection || /* @__PURE__ */ jsx(Fragment$1, {}),
+	value,
+	onChange,
+	...props
+});
 
 //#endregion
 //#region src/components/skeleton/index.tsx
@@ -8387,21 +7457,6 @@ const Skeleton = ({ className, "data-testid": dataTestId }) => /* @__PURE__ */ j
 	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__ */ jsxs("div", {
-	"data-testid": "skill-pill-container",
-	className: "flex items-center rounded-full border border-gray-200 p-[3px]",
-	children: [/* @__PURE__ */ jsx("span", {
-		className: "pr-4 pl-3",
-		children: name
-	}), /* @__PURE__ */ 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__ */ jsx("div", {
@@ -8474,99 +7529,6 @@ function TableRow({ children, className, header,...props }) {
 	});
 }
 
-//#endregion
-//#region src/components/tabs/Tab.tsx
-const Tab = forwardRef(({ tabId, activeTab, tabContent, clickFnc, rightSection }, ref) => /* @__PURE__ */ 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__ */ 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__ */ jsx("div", {
-		"data-testid": "tabs-badge",
-		className: clsx("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 = useMemo(() => {
-		const refs = {};
-		tabs?.forEach((tab) => {
-			refs[tab.value] = createRef();
-		});
-		return refs;
-	}, [tabs]);
-	const [underlineStyle, setUnderlineStyle] = useState({
-		width: 0,
-		left: 0
-	});
-	useEffect(() => {
-		if (activeTab && tabRefs[activeTab]?.current) {
-			const activeTabElement = tabRefs[activeTab].current;
-			setUnderlineStyle({
-				width: activeTabElement?.offsetWidth || 0,
-				left: activeTabElement?.offsetLeft || 0
-			});
-		}
-	}, [activeTab, tabRefs]);
-	return /* @__PURE__ */ jsx("div", {
-		className: "w-full",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "relative inline-block w-auto border-b-[3px] border-gray-200",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "flex",
-				children: tabs && tabs?.map((tab) => tab.requiredPermissions ? /* @__PURE__ */ jsx(TabContent, {
-					tab,
-					ref: tabRefs[tab.value],
-					setActiveTab,
-					activeTab
-				}, tab.value) : /* @__PURE__ */ jsx(TabContent, {
-					tab,
-					ref: tabRefs[tab.value],
-					setActiveTab,
-					activeTab
-				}, tab.value))
-			}), /* @__PURE__ */ jsx("div", {
-				className: "absolute h-[3px] bg-gray-900 transition-all duration-300",
-				style: {
-					width: underlineStyle.width,
-					left: underlineStyle.left,
-					bottom: "-3px"
-				}
-			})]
-		})
-	});
-};
-const TabContent = forwardRef(({ tab, setActiveTab, activeTab }, ref) => /* @__PURE__ */ 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 = forwardRef(({ className, label, error, rows = 8,...props }, ref) => /* @__PURE__ */ jsxs("div", {
@@ -8772,14 +7734,15 @@ const ProfileMenu = ({ title, metaTitle, icon, content, disabled = false, classN
 		ref: menuRef,
 		"data-context-menu-id": metaTitle,
 		"data-context-menu-content": metaTitle,
-		children: [/* @__PURE__ */ jsxs(UnstyledButton, {
+		children: [/* @__PURE__ */ 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__ */ jsx("span", {
@@ -8793,13 +7756,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__ */ jsx(UnstyledButton, {
+				(c, index) => /* @__PURE__ */ 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,
@@ -10491,10 +9455,10 @@ const GiftCard = ({ className, amount, amountTotal, cardNumber, validUntilDate,.
 				children: [
 					/* @__PURE__ */ 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__ */ jsx("span", {
@@ -11539,5 +10503,5 @@ const RangeSlider = forwardRef(function RangeSlider$1({ className, min = 0, max
 RangeSlider.displayName = "RangeSlider";
 
 //#endregion
-export { Accordion, ActionIcon, Alert, AutoCompleteInput, Avatar, AvatarIndicator, Badge, BigBadge, BlogWidget, BrandProvider, BrandTopMenu, BreadCrumb, Button, CSS_VARIABLE_KEYS, Calendar, CategoryFilter, Chatbot, Checkbox, Collection, CounterIcon, Coupon, DatePickerInput, Divider, Dropdown, FavouriteButton, FilterButton, Filters, FlightSwitch, Footer, GiftCard, HamburgerMenuButton, Header, Hero, HotelAccomodationResults, HotelWidget, IconAlert, IconArrival, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowUp, IconBeach, IconBed, IconBlog, IconBus, IconCalendar, IconCancel, IconCar, IconCarSun, IconCheck, IconChevronRight, IconCity, IconClock, IconCocktail, IconDelete, IconDeparture, IconDollar, IconEdit, IconExpand, IconFacebook, IconFavorite, IconFilter, IconFood, IconHeart, IconHeartFilled, IconHot, IconHotel, IconHouse, IconIce, IconInfo, IconInstagram, IconLuggage, IconMail, IconMap, IconMinus, IconParty, IconPhone, IconPhoto, IconPinterest, IconPlane, IconPlus, IconPresent, IconQuestion, IconRating, IconSearch, IconSeat, IconShare, IconSplash, IconStar, IconSuccess, IconSun, IconSupport, IconTemperature, IconTiktok, IconTransfer, IconTree, IconTwitter, IconUser, IconView, IconWarning, IconWatched, IconWhatsapp, IconWinterSport, IconWinterSun, Island, Label, LinkBox, Loading, Logo, Map, MatrixTable, Menu, MiddleNavigation, Modal, Nominations, NumberField, PageNavigation, PageRating, PasswordInput, PhoneNumberInput, PhotoCardsRotated, Popover, PriceBox, PriceCheck, ProfileMenu, ProgressBar, PvPopup, QuantityButtons, RadioButton, RangeSlider, Rating, RegionSelector, ResultPageFilterBox, Review, ReviewSmall, Reviews, ScrollToTop, SearchBlock, SearchBox, SearchBoxResults, SearchInput, Select, Skeleton, SkillPill, Slider, Spotlights, Stepper, StickyFooter, StickyMobileButtonWrapper, Table, TableCell, TableHeader, TableHeaderItem, TableHeaderRow, TableRow, TabsBadge, TabsWrapper, TextInput, Textarea, TimeInput, Toggle, TopHeaderMenu, TopMenu, TransportToggle, TruncatedText, UnorderedList, UnorderedListItem, UnstyledButton, Usp, ViewedAccomodations, WarningText, Weather, buttonVariants, getCSSVariable, setCSSVariable, useBrand, withPvUi };
+export { Accordion, BlogWidget, BrandProvider, BrandTopMenu, Button, CSS_VARIABLE_KEYS, Calendar, CategoryFilter, Chatbot, Checkbox, Collection, CounterIcon, Coupon, Divider, Dropdown, FilterButton, Filters, FlightSwitch, Footer, GiftCard, HamburgerMenuButton, Header, Hero, HotelAccomodationResults, HotelWidget, IconAlert, IconArrival, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowUp, IconBeach, IconBed, IconBlog, IconBus, IconCalendar, IconCancel, IconCar, IconCarSun, IconCheck, IconChevronRight, IconCity, IconClock, IconCocktail, IconDelete, IconDeparture, IconDollar, IconEdit, IconExpand, IconFacebook, IconFavorite, IconFilter, IconFood, IconHeart, IconHeartFilled, IconHot, IconHotel, IconHouse, IconIce, IconInfo, IconInstagram, IconLuggage, IconMail, IconMap, IconMinus, IconParty, IconPhone, IconPhoto, IconPinterest, IconPlane, IconPlus, IconPresent, IconQuestion, IconRating, IconSearch, IconSeat, IconShare, IconSplash, IconStar, IconSuccess, IconSun, IconSupport, IconTemperature, IconTiktok, IconTransfer, IconTree, IconTwitter, IconUser, IconView, IconWarning, IconWatched, IconWhatsapp, IconWinterSport, IconWinterSun, Label, LinkBox, Loading, Logo, Map, MatrixTable, Menu, MiddleNavigation, Nominations, NumberField, PageNavigation, PageRating, PhoneNumberInput, PhotoCardsRotated, PriceBox, PriceCheck, ProfileMenu, ProgressBar, PvPopup, QuantityButtons, RadioButton, RangeSlider, Rating, RegionSelector, ResultPageFilterBox, Review, ReviewSmall, Reviews, ScrollToTop, SearchBlock, SearchBox, SearchBoxResults, SearchInput, Skeleton, Slider, Spotlights, Stepper, StickyFooter, StickyMobileButtonWrapper, Table, TableCell, TableHeader, TableHeaderItem, TableHeaderRow, TableRow, TextInput, Textarea, TimeInput, Toggle, TopHeaderMenu, TopMenu, TransportToggle, TruncatedText, UnorderedList, UnorderedListItem, Usp, ViewedAccomodations, WarningText, Weather, buttonVariants, getCSSVariable, setCSSVariable, useBrand, withPvUi };
 //# sourceMappingURL=index.js.map