@prijsvrijtechsupport/ui 0.0.38 → 0.0.40

package/dist/index.js

@@ -157,10 +157,15 @@ var globals_default = {};
 */
 function withPvUi(Component) {
 	const WrappedComponent = forwardRef((props, ref) => {
-		return /* @__PURE__ */ jsx(Component, {
+		const scopedProps = {
 			...props,
 			ref,
 			"data-pv-ui": true
+		};
+		return /* @__PURE__ */ jsx("div", {
+			"data-pv-ui": true,
+			style: { display: "contents" },
+			children: /* @__PURE__ */ jsx(Component, { ...scopedProps })
 		});
 	});
 	WrappedComponent.displayName = `withPvUi(${Component.displayName || Component.name || "Component"})`;
@@ -261,12 +266,12 @@ const Button = forwardRef(function Button$1({ type = "button", variant = "primar
 		...props,
 		children: [
 			!iconRight && formattedIcon && /* @__PURE__ */ jsx("span", {
-				className: "w-4 h-4",
+				className: "w-4 h-4 justify-center flex items-center",
 				children: formattedIcon
 			}),
 			children,
 			iconRight && formattedIcon && /* @__PURE__ */ jsx("span", {
-				className: "w-4 h-4",
+				className: "w-4 h-4 justify-center flex items-center",
 				children: formattedIcon
 			})
 		]
@@ -4295,7 +4300,7 @@ const iconMap = {
 	FL: IconPlane,
 	HO: IconCar
 };
-const TransportToggle = ({ options, selectedValue, onSelect, disabled = false, disabledSingle = undefined, disabledSingleText = "", className, loading, orientation = "horizontal" }) => {
+const TransportToggle = withPvUi(({ options, selectedValue, onSelect, disabled = false, disabledSingle = undefined, disabledSingleText = "", className, loading, orientation = "horizontal" }) => {
 	const normalizeOptionValue = (value) => value?.trim().toUpperCase() ?? "";
 	const normalizedOptionIds = options.map((option) => normalizeOptionValue(option.id));
 	const normalizedSelectedValue = normalizeOptionValue(selectedValue);
@@ -4311,7 +4316,7 @@ const TransportToggle = ({ options, selectedValue, onSelect, disabled = false, d
 	const isDisabledSingle = (optionId) => disabledSingle && normalizeOptionValue(optionId) === normalizeOptionValue(disabledSingle);
 	const isActive = (optionId) => resolvedSelectedValue === normalizeOptionValue(optionId);
 	return /* @__PURE__ */ jsx("div", {
-		className: "@container w-full",
+		className: "@container w-full box-border",
 		children: /* @__PURE__ */ jsx("div", {
 			className: cn("flex justify-between text-xs w-full toggle p-1 rounded-sm font-bold min-h-12", orientation === "horizontal" ? "flex-row" : "flex-col", disabled && "opacity-50", className),
 			"data-testid": "transport-toggle-wrapper",
@@ -4325,9 +4330,9 @@ const TransportToggle = ({ options, selectedValue, onSelect, disabled = false, d
 				children: /* @__PURE__ */ jsxs("span", {
 					className: "flex flex-col items-center",
 					children: [/* @__PURE__ */ jsxs("span", {
-						className: "whitespace-nowrap uppercase flex flex-row items-center",
+						className: "whitespace-nowrap uppercase flex flex-row items-center gap-2",
 						children: [/* @__PURE__ */ jsx("div", {
-							className: "flex items-center justify-center w-8 h-4 mb-1",
+							className: "flex items-center justify-center w-auto h-4",
 							children: (() => {
 								const IconComponent = iconMap[option.icon];
 								if (!IconComponent) return null;
@@ -4345,7 +4350,7 @@ const TransportToggle = ({ options, selectedValue, onSelect, disabled = false, d
 			}, option.id)) })
 		})
 	});
-};
+});
 const Toggle = TransportToggle;
 
 //#endregion
@@ -4947,7 +4952,7 @@ const Stepper = ({ className, steps,...props }) => {
 
 //#endregion
 //#region src/components/resultPageFilterBox/index.tsx
-const ResultPageFilterBox = ({ className, filters,...props }) => {
+const ResultPageFilterBox = ({ className, filters, clickFunction,...props }) => {
 	const departureDateData = filters.find((filter) => filter.Name === "Vertrekdatum");
 	const durationData = filters.find((filter) => filter.Name === "Reisduur");
 	const boardBasisData = filters.find((filter) => filter.Name === "Verzorging");
@@ -4970,19 +4975,22 @@ const ResultPageFilterBox = ({ className, filters,...props }) => {
 				"YYYY-MM-DD"
 			]).locale("nl").format("D MMMM [']YY") : "Geen voorkeur",
 			icon: /* @__PURE__ */ jsx(IconCalendar, { className: "size-5" }),
-			disabled: Boolean(departureDateData?.Items && departureDateData?.Items.length <= 1)
+			disabled: Boolean(departureDateData?.Items && departureDateData?.Items.length <= 1),
+			isCancellable: true
 		},
 		{
 			name: travelParty?.Name,
 			value: travelParty?.Value,
 			icon: travelParty?.icon,
-			disabled: false
+			disabled: false,
+			isCancellable: true
 		},
 		{
 			name: durationData?.Name,
 			value: durationData?.Items?.find((item) => item.Active)?.Name || "Geen voorkeur",
 			icon: /* @__PURE__ */ jsx(IconClock, { className: "size-5" }),
-			disabled: Boolean(durationData?.Items && durationData?.Items.length <= 1)
+			disabled: Boolean(durationData?.Items && durationData?.Items.length <= 1),
+			isCancellable: true
 		},
 		{
 			name: boardBasisData?.Name,
@@ -5022,21 +5030,28 @@ const ResultPageFilterBox = ({ className, filters,...props }) => {
 		className: clsx("bg-white", className),
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
-			className: "border border-primary rounded-md overflow-hidden grid grid-cols-1 md:grid-cols-2 [&>*:last-child]:border-b-0 md:[&>*:nth-last-child(-n+2)]:border-b-0 md:[&>*:nth-child(even)]:border-l md:[&>*:nth-child(even)]:border-l-primary [&>*:not(:last-child)]:border-b [&>*:not(:last-child)]:border-b-primary md:[&>*:not(:nth-last-child(-n+2))]:border-b md:[&>*:not(:nth-last-child(-n+2))]:border-b-primary",
+			className: "border border-[#80c8f8] rounded-md overflow-hidden grid grid-cols-1 md:grid-cols-2 [&>*:last-child]:border-b-0 md:[&>*:nth-last-child(-n+2)]:border-b-0 md:[&>*:nth-child(even)]:border-l md:[&>*:nth-child(even)]:border-l-[#80c8f8] [&>*:not(:last-child)]:border-b [&>*:not(:last-child)]:border-b-[#80c8f8] md:[&>*:not(:nth-last-child(-n+2))]:border-b md:[&>*:not(:nth-last-child(-n+2))]:border-b-[#80c8f8]",
 			children: filtersData.map((filter, index) => /* @__PURE__ */ jsxs("button", {
-				className: `flex flex-row items-center gap-2 p-1.5 hover:bg-gray-50/80 cursor-pointer ${filter.disabled ? "bg-gray-50 text-black/50" : ""}`,
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "whitespace-nowrap p-1.5",
-					children: filter.icon
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "flex flex-col gap-0 items-start",
+				onClick: () => {},
+				className: `flex flex-row items-center justify-between gap-2 p-1.5 hover:bg-gray-50/70 cursor-pointer ${filter.disabled ? "bg-gray-100 text-black/50" : ""}`,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-row",
 					children: [/* @__PURE__ */ jsx("span", {
-						className: "font-bold text-xs",
-						children: filter.name
-					}), /* @__PURE__ */ jsx("span", {
-						className: "text-base",
-						children: filter.value
+						className: "whitespace-nowrap p-1.5",
+						children: filter.icon
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-0 items-start",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "font-bold text-xs text-[#666666]",
+							children: filter.name
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-sm",
+							children: filter.value
+						})]
 					})]
+				}), filter.isCancellable && /* @__PURE__ */ jsx("div", {
+					className: "flex items-center mr-2 bg-gray-200 rounded-full p-1",
+					children: /* @__PURE__ */ jsx(IconCancel, { className: "size-3 text-white" })
 				})]
 			}, index))
 		})
@@ -9341,23 +9356,23 @@ const MatrixTable = ({ className, startDuration, endDuration, startDate, endDate
 											onClick: loadPrevious,
 											variant: "icon",
 											iconRight: true,
-											className: "flex flex-row items-center justify-start text-xs",
+											className: "flex flex-row font-medium items-center justify-start text-xs",
 											icon: false,
 											children: [/* @__PURE__ */ jsx(IconArrowLeft, {
 												className: "text-primary",
-												width: 16,
-												height: 16
+												width: 20,
+												height: 20
 											}), " eerder"]
 										}) : null, index === dates.length - 1 && loadNext ? /* @__PURE__ */ jsxs(Button, {
 											onClick: loadNext,
 											variant: "icon",
-											className: "flex flex-row items-center justify-start text-xs",
+											className: "flex flex-row font-medium items-center justify-start text-xs",
 											iconRight: true,
 											icon: false,
 											children: ["later", /* @__PURE__ */ jsx(IconArrowRight, {
 												className: "text-primary",
-												width: 16,
-												height: 16
+												width: 20,
+												height: 20
 											})]
 										}) : null]
 									}, date);
@@ -9916,20 +9931,58 @@ const WarningText = ({ className, warningText, onClick, type,...props }) => /* @
 	})]
 });
 
+//#endregion
+//#region src/components/reviewSmall/index.tsx
+const ReviewSmall = ({ className, rating, showArrow = true, "data-testid": dataTestId = "review",...props }) => {
+	const formatRating$1 = (rating$1) => {
+		return rating$1.toFixed(1);
+	};
+	const ratingProcessed = formatRating$1(rating);
+	const RatingNumber = ({ className: className$1, showArrow: showArrow$1 }) => /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("review-small-color review-small-number-color", className$1),
+			children: ratingProcessed
+		}), showArrow$1 && /* @__PURE__ */ jsx("div", {
+			className: "absolute left-1/2 -translate-x-1/2 -bottom-[6px]",
+			children: /* @__PURE__ */ jsx("div", { className: "w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-t-[8px] review-small-arrow" })
+		})]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-component": "review",
+		"data-testid": dataTestId,
+		className: clsx(className, "flex flex-col w-fit"),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-row gap-2 review-small rounded-sm",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex content-center items-center font-bold",
+				children: /* @__PURE__ */ jsx(RatingNumber, {
+					className: "px-1 rounded-xs",
+					showArrow
+				})
+			})
+		})
+	});
+};
+
 //#endregion
 //#region src/components/hero/index.tsx
 const Hero = ({ className, sliderImages, topRightImage, bottomLeftImage, bottomRightImage, bottomRightOverlay, hotel, priceBoxPosition = "end",...props }) => /* @__PURE__ */ jsx("div", {
 	"data-component": "hero",
-	className: clsx(className, "bg-white p-1 rounded-lg"),
+	className: clsx(className, "bg-white p-1 rounded-lg hero-shadow"),
 	...props,
 	children: /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col md:flex-row",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: clsx("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__ */ jsx("div", {
-					className: "md:col-span-2 md:row-span-2 overflow-hidden rounded-l-lg",
-					children: /* @__PURE__ */ jsx(Slider, {
+				/* @__PURE__ */ jsxs("div", {
+					className: "md:col-span-2 md:row-span-2 overflow-hidden rounded-l-lg relative",
+					children: [/* @__PURE__ */ jsx(ReviewSmall, {
+						className: "absolute right-4 top-4 z-50",
+						rating: 9.3
+					}), /* @__PURE__ */ jsx(Slider, {
 						className: "h-full max-h-[340px] md:h-full rounded-l-lg",
 						slides: sliderImages.map((src, index) => /* @__PURE__ */ jsx("img", {
 							src,
@@ -9940,7 +9993,7 @@ const Hero = ({ className, sliderImages, topRightImage, bottomLeftImage, bottomR
 						dotsPlacement: "inside",
 						options: { loop: true },
 						lazyLoad: true
-					})
+					})]
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "hidden md:flex col-span-1 row-span-1 overflow-hidden",
@@ -10383,41 +10436,6 @@ const FlightSwitch = ({ className, leg, direction, onClassSelect,...props }) =>
 	});
 };
 
-//#endregion
-//#region src/components/reviewSmall/index.tsx
-const ReviewSmall = ({ className, rating, showArrow = true, "data-testid": dataTestId = "review",...props }) => {
-	const formatRating$1 = (rating$1) => {
-		return rating$1.toFixed(1);
-	};
-	const ratingProcessed = formatRating$1(rating);
-	const RatingNumber = ({ className: className$1, showArrow: showArrow$1 }) => /* @__PURE__ */ jsxs("div", {
-		className: "relative",
-		children: [/* @__PURE__ */ jsx("span", {
-			className: cn("review-small-color review-small-number-color", className$1),
-			children: ratingProcessed
-		}), showArrow$1 && /* @__PURE__ */ jsx("div", {
-			className: "absolute left-1/2 -translate-x-1/2 -bottom-[6px]",
-			children: /* @__PURE__ */ jsx("div", { className: "w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-t-[8px] review-small-arrow" })
-		})]
-	});
-	return /* @__PURE__ */ jsx("div", {
-		"data-component": "review",
-		"data-testid": dataTestId,
-		className: clsx(className, "flex flex-col w-fit"),
-		...props,
-		children: /* @__PURE__ */ jsx("div", {
-			className: "flex flex-row gap-2 review-small rounded-sm",
-			children: /* @__PURE__ */ jsx("div", {
-				className: "flex content-center items-center font-bold",
-				children: /* @__PURE__ */ jsx(RatingNumber, {
-					className: "px-1 rounded-xs",
-					showArrow
-				})
-			})
-		})
-	});
-};
-
 //#endregion
 //#region src/components/giftCard/index.tsx
 const setCurrencyValue = (value, showCurrencySymbol = true) => {
@@ -11293,7 +11311,7 @@ const SearchBlockButton = ({ className, label, labelOutside, icon, downIcon, onC
 		className: "searchBlockButtonLabel",
 		children: label
 	}), /* @__PURE__ */ jsxs("button", {
-		className: clsx(className, "searchBlockButton flex flex-row items-center justify-between gap-2 px-2 py-2"),
+		className: clsx(className, "searchBlockButton flex flex-row items-center justify-between gap-2 px-2 py-2 cursor-pointer border border-transparent hover:border-gray-300 transition-all"),
 		onClick,
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -11326,7 +11344,7 @@ const SearchBlockButton = ({ className, label, labelOutside, icon, downIcon, onC
 		})]
 	})] });
 };
-const SearchBlock = ({ className, searchBlockTitle, searchBlockForm, onClickFn, "data-testid": dataTestId = "book-module",...props }) => {
+const SearchBlock = ({ className, searchBlockTitle, searchBlockForm, loading, onClickFn, "data-testid": dataTestId = "book-module",...props }) => {
 	const brand = useBrand();
 	return /* @__PURE__ */ jsx("div", {
 		"data-component": "book-module",
@@ -11378,7 +11396,7 @@ const SearchBlock = ({ className, searchBlockTitle, searchBlockForm, onClickFn,
 					variant: `${brand === "prijsvrij" ? "primaryGlow" : "primary"}`,
 					className: `${brand === "dreizen" ? "mt-6" : "mt-2"}`,
 					onClick: onClickFn,
-					icon: /* @__PURE__ */ jsx(IconArrowRight, {}),
+					icon: loading ? /* @__PURE__ */ jsx(IconSun, { className: "animate-spin" }) : /* @__PURE__ */ jsx(IconArrowRight, {}),
 					iconRight: true,
 					children: "Zoek vakanties"
 				})
@@ -11486,5 +11504,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, HR, 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, TruncatedText, UnorderedList, UnorderedListItem, UnstyledButton, Usp, ViewedAccomodations, WarningText, Weather, buttonVariants, getCSSVariable, setCSSVariable, useBrand, withPvUi };
+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, HR, 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 };
 //# sourceMappingURL=index.js.map