@prijsvrijtechsupport/ui 0.0.38 → 0.0.40

package/dist/index.cjs

@@ -179,10 +179,15 @@ var globals_default = {};
 */
 function withPvUi(Component) {
 	const WrappedComponent = (0, react.forwardRef)((props, ref) => {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		const scopedProps = {
 			...props,
 			ref,
 			"data-pv-ui": true
+		};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-pv-ui": true,
+			style: { display: "contents" },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, { ...scopedProps })
 		});
 	});
 	WrappedComponent.displayName = `withPvUi(${Component.displayName || Component.name || "Component"})`;
@@ -283,12 +288,12 @@ const Button = (0, react.forwardRef)(function Button$1({ type = "button", varian
 		...props,
 		children: [
 			!iconRight && formattedIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "w-4 h-4",
+				className: "w-4 h-4 justify-center flex items-center",
 				children: formattedIcon
 			}),
 			children,
 			iconRight && formattedIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "w-4 h-4",
+				className: "w-4 h-4 justify-center flex items-center",
 				children: formattedIcon
 			})
 		]
@@ -4317,7 +4322,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);
@@ -4333,7 +4338,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__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "@container w-full",
+		className: "@container w-full box-border",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.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",
@@ -4347,9 +4352,9 @@ const TransportToggle = ({ options, selectedValue, onSelect, disabled = false, d
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 					className: "flex flex-col items-center",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: "whitespace-nowrap uppercase flex flex-row items-center",
+						className: "whitespace-nowrap uppercase flex flex-row items-center gap-2",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.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;
@@ -4367,7 +4372,7 @@ const TransportToggle = ({ options, selectedValue, onSelect, disabled = false, d
 			}, option.id)) })
 		})
 	});
-};
+});
 const Toggle = TransportToggle;
 
 //#endregion
@@ -4969,7 +4974,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");
@@ -4992,19 +4997,22 @@ const ResultPageFilterBox = ({ className, filters,...props }) => {
 				"YYYY-MM-DD"
 			]).locale("nl").format("D MMMM [']YY") : "Geen voorkeur",
 			icon: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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,
@@ -5044,21 +5052,28 @@ const ResultPageFilterBox = ({ className, filters,...props }) => {
 		className: (0, clsx.default)("bg-white", className),
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "whitespace-nowrap p-1.5",
-					children: filter.icon
-				}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-row",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "font-bold text-xs",
-						children: filter.name
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-base",
-						children: filter.value
+						className: "whitespace-nowrap p-1.5",
+						children: filter.icon
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-col gap-0 items-start",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "font-bold text-xs text-[#666666]",
+							children: filter.name
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-sm",
+							children: filter.value
+						})]
 					})]
+				}), filter.isCancellable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex items-center mr-2 bg-gray-200 rounded-full p-1",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconCancel, { className: "size-3 text-white" })
 				})]
 			}, index))
 		})
@@ -9363,23 +9378,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__ */ (0, react_jsx_runtime.jsx)(IconArrowLeft, {
 												className: "text-primary",
-												width: 16,
-												height: 16
+												width: 20,
+												height: 20
 											}), " eerder"]
 										}) : null, index === dates.length - 1 && loadNext ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(IconArrowRight, {
 												className: "text-primary",
-												width: 16,
-												height: 16
+												width: 20,
+												height: 20
 											})]
 										}) : null]
 									}, date);
@@ -9938,20 +9953,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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: cn("review-small-color review-small-number-color", className$1),
+			children: ratingProcessed
+		}), showArrow$1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "absolute left-1/2 -translate-x-1/2 -bottom-[6px]",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-component": "review",
+		"data-testid": dataTestId,
+		className: (0, clsx.default)(className, "flex flex-col w-fit"),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex flex-row gap-2 review-small rounded-sm",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex content-center items-center font-bold",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
 	"data-component": "hero",
-	className: (0, clsx.default)(className, "bg-white p-1 rounded-lg"),
+	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.jsx)("div", {
-					className: "md:col-span-2 md:row-span-2 overflow-hidden rounded-l-lg",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Slider, {
+				/* @__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,
@@ -9962,7 +10015,7 @@ const Hero = ({ className, sliderImages, topRightImage, bottomLeftImage, bottomR
 						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",
@@ -10405,41 +10458,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__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "relative",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: cn("review-small-color review-small-number-color", className$1),
-			children: ratingProcessed
-		}), showArrow$1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "absolute left-1/2 -translate-x-1/2 -bottom-[6px]",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-component": "review",
-		"data-testid": dataTestId,
-		className: (0, clsx.default)(className, "flex flex-col w-fit"),
-		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "flex flex-row gap-2 review-small rounded-sm",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex content-center items-center font-bold",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingNumber, {
-					className: "px-1 rounded-xs",
-					showArrow
-				})
-			})
-		})
-	});
-};
-
 //#endregion
 //#region src/components/giftCard/index.tsx
 const setCurrencyValue = (value, showCurrencySymbol = true) => {
@@ -11315,7 +11333,7 @@ const SearchBlockButton = ({ className, label, labelOutside, icon, downIcon, onC
 		className: "searchBlockButtonLabel",
 		children: label
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-		className: (0, clsx.default)(className, "searchBlockButton flex flex-row items-center justify-between gap-2 px-2 py-2"),
+		className: (0, clsx.default)(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__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -11348,7 +11366,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__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-component": "book-module",
@@ -11400,7 +11418,7 @@ const SearchBlock = ({ className, searchBlockTitle, searchBlockForm, onClickFn,
 					variant: `${brand === "prijsvrij" ? "primaryGlow" : "primary"}`,
 					className: `${brand === "dreizen" ? "mt-6" : "mt-2"}`,
 					onClick: onClickFn,
-					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconArrowRight, {}),
+					icon: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconSun, { className: "animate-spin" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconArrowRight, {}),
 					iconRight: true,
 					children: "Zoek vakanties"
 				})
@@ -11672,6 +11690,7 @@ exports.TimeInput = TimeInput;
 exports.Toggle = Toggle;
 exports.TopHeaderMenu = TopHeaderMenu;
 exports.TopMenu = TopMenu;
+exports.TransportToggle = TransportToggle;
 exports.TruncatedText = TruncatedText;
 exports.UnorderedList = UnorderedList;
 exports.UnorderedListItem = UnorderedListItem;