@prijsvrijtechsupport/ui 0.0.31 → 0.0.33

package/dist/index.d.ts

@@ -103,5 +103,5 @@ export { Collection } from "./components/collection";
 export { HotelWidget } from "./components/hotelWidget";
 export { PageNavigation } from "./components/pageNavigation";
 export { PvPopup } from "./components/pvPopup";
-export { BookModule } from "./components/bookModule";
+export { SearchBlock } from "./components/searchBlock";
 export { RangeSlider } from "./components/rangeSlider";

package/dist/index.js

@@ -85,7 +85,7 @@ var styles_default$15 = {};
 var styles_default$14 = {};
 
 //#endregion
-//#region src/components/bookModule/styles.css
+//#region src/components/searchBlock/styles.css
 var styles_default$13 = {};
 
 //#endregion
@@ -200,7 +200,7 @@ const IconAlert = ({ className,...props }) => /* @__PURE__ */ jsxs("svg", {
 
 //#endregion
 //#region src/components/button/buttonVariants.ts
-const defaultButtonStyling = "justify-center group relative flex items-center gap-2 cursor-pointer border rounded py-2 px-5  text-sx md:text-sm md:font-medium font-medium hover:outline-hidden focus:outline-hidden disabled:cursor-not-allowed transition-colors duration-100 ease-in-out";
+const defaultButtonStyling = "justify-center group relative whitespace-nowrap flex items-center gap-2 cursor-pointer border rounded py-2 px-5 text-xs md:text-sm md:font-medium font-medium hover:outline-hidden focus:outline-hidden disabled:cursor-not-allowed transition-colors duration-100 ease-in-out";
 const buttonVariants = {
 	primary: clsx(defaultButtonStyling, "btn-primary btn-primary-boxShadow hover:btn-primary-boxShadow-hover active:btn-primary-boxShadow-active hover:-translate-y-[3px] active:translate-y-[2px]"),
 	primaryGlow: clsx(defaultButtonStyling, "btn-primary btn-shadow btn-glow"),
@@ -217,7 +217,7 @@ const buttonVariants = {
 	"prijsvrij-primary": clsx(defaultButtonStyling, "border-transparent bg-prijsvrij-primary text-white hover:bg-prijsvrij-600 disabled:bg-prijsvrij-100 disabled:text-prijsvrij-700"),
 	"dreizen-primary": clsx(defaultButtonStyling, "border-transparent bg-dreizen-primary text-white hover:bg-dreizen-600 disabled:bg-dreizen-100 disabled:text-dreizen-700"),
 	search: clsx(defaultButtonStyling, "absolute top-0 right-0 h-full w-[50px] border-0 bg-transparent bg-no-repeat"),
-	textButton: clsx("justify-center group relative flex items-center gap-2 cursor-pointer text-sx md:text-sm md:font-medium font-medium hover:outline-hidden focus:outline-hidden disabled:cursor-not-allowed transition-colors duration-100 ease-in-out btn-text btn-text-color btn-text-hover-color")
+	textButton: clsx("justify-center group relative flex items-center gap-2 cursor-pointer text-base md:text-sm md:font-medium font-medium hover:outline-hidden focus:outline-hidden disabled:cursor-not-allowed transition-colors duration-100 ease-in-out btn-text btn-text-color btn-text-hover-color")
 };
 
 //#endregion
@@ -4030,7 +4030,7 @@ const Header = ({ className, middleNavigation, menuItems, "data-testid": dataTes
 	return /* @__PURE__ */ jsx("div", {
 		"data-component": "header",
 		"data-testid": dataTestId,
-		className: clsx(`w-full ${brand === "dreizen" && "shadow-[0_4px_4px_rgba(0,0,0,0.05)]"}`, className),
+		className: clsx(`w-full ${brand === "dreizen" && "bg-white shadow-[0_4px_4px_rgba(0,0,0,0.05)]"}`, className),
 		children: brand === "prijsvrij" ? /* @__PURE__ */ jsx("div", {
 			className: "w-full",
 			style: { backgroundColor: "#0092f2" },
@@ -4340,6 +4340,14 @@ const Toggle = TransportToggle;
 
 //#endregion
 //#region src/components/topHeaderMenu/index.tsx
+const createTimeoutCallback = (iconId, setFlyingIcons, onHeartClick) => {
+	return () => {
+		setFlyingIcons((prev) => prev.filter((icon) => icon.id !== iconId));
+		if (onHeartClick) {
+			onHeartClick();
+		}
+	};
+};
 const TopHeaderMenu = ({ className, menuItems, onHeartClick,...props }) => {
 	const [flyingIcons, setFlyingIcons] = useState([]);
 	const iconIdCounter = useRef(0);
@@ -4362,12 +4370,8 @@ const TopHeaderMenu = ({ className, menuItems, onHeartClick,...props }) => {
 			endY: targetRect.top + targetRect.height / 2
 		};
 		setFlyingIcons((prev) => [...prev, newIcon]);
-		setTimeout(() => {
-			setFlyingIcons((prev) => prev.filter((icon) => icon.id !== newIcon.id));
-			if (onHeartClick) {
-				onHeartClick();
-			}
-		}, 1e3);
+		const timeoutCallback = createTimeoutCallback(newIcon.id, setFlyingIcons, onHeartClick);
+		setTimeout(timeoutCallback, 1e3);
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		"data-component": "top-header-menu",
@@ -4473,9 +4477,9 @@ const Usp = ({ className, orientation = "horizontal", uspItems, "data-testid": d
 
 //#endregion
 //#region src/components/middleNavigation/index.tsx
-const MenuItem = ({ item, onClick }) => {
+const MenuItem = ({ item }) => {
 	return /* @__PURE__ */ jsxs("li", {
-		onClick,
+		onClick: item.onClick,
 		className: "flex cursor-pointer flex-col justify-center items-center",
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "w-6 h-6 flex items-center justify-center",
@@ -4492,10 +4496,7 @@ const MiddleNavigation = ({ className, menuItems,...props }) => /* @__PURE__ */
 	...props,
 	children: /* @__PURE__ */ jsx("ul", {
 		className: "flex flex-row gap-4",
-		children: menuItems.map((item) => /* @__PURE__ */ jsx(MenuItem, {
-			item,
-			onClick: item.onClick
-		}, item.text))
+		children: menuItems.map((item) => /* @__PURE__ */ jsx(MenuItem, { item }, item.text))
 	})
 });
 
@@ -4733,7 +4734,7 @@ const FooterNavigation = ({ className, showIcon = true, columns = footerNavigati
 	children: /* @__PURE__ */ jsx("div", {
 		className: "max-w-7xl mx-auto",
 		children: /* @__PURE__ */ jsx("div", {
-			className: "grid grid-cols-8 gap-8",
+			className: "grid grid-rows-8 sm:grid-cols-8 gap-8",
 			children: columns.map((column, columnIndex) => /* @__PURE__ */ jsxs("div", {
 				className: "col-span-2",
 				children: [/* @__PURE__ */ jsx("h3", {
@@ -4764,15 +4765,15 @@ const FooterNavigation = ({ className, showIcon = true, columns = footerNavigati
 const FooterBar = ({ className, data = footerBarData, "data-testid": dataTestId = "footer-bar",...props }) => /* @__PURE__ */ jsx("div", {
 	"data-component": "footer-bar",
 	"data-testid": dataTestId,
-	className: clsx("bg-primary text-white py-4 px-6", className),
+	className: clsx("bg-primary text-white py-4 px-3 sm:py-4 sm:px-6", className),
 	...props,
 	children: /* @__PURE__ */ jsxs("div", {
-		className: "max-w-7xl mx-auto flex justify-between items-center",
+		className: "max-w-7xl mx-auto flex-col flex sm:flex-row gap-2 sm:gap-0 justify-between items-center",
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "flex space-x-6",
+			className: "flex space-x-6 w-full items-center justify-center overflow-scroll",
 			children: data.leftLinks.map((link, index) => /* @__PURE__ */ jsx("a", {
 				href: link.href,
-				className: "text-white transition-colors",
+				className: "text-white transition-colors whitespace-nowrap",
 				children: link.text
 			}, index))
 		}), /* @__PURE__ */ jsx("div", {
@@ -9063,7 +9064,7 @@ const Calendar = ({ className, month, year = 2026,...props }) => {
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center justify-between gap-4 mb-3",
 			children: [/* @__PURE__ */ jsx("div", {
-				className: "text-sm text-secondary font-bold",
+				className: "text-sm text-secondary font-bold whitespace-nowrap",
 				children: firstOfMonth.toLocaleDateString("nl-NL", {
 					month: "long",
 					year: "numeric"
@@ -10164,7 +10165,7 @@ function CompactTimeline({ leg, hasStopOvers, onToggleStopOvers }) {
 				/* @__PURE__ */ jsx(TimelineDot, {})
 			]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-2 w-full py-1",
+			className: "flex flex-col gap-2 w-full",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex flex-row gap-2",
@@ -10192,7 +10193,7 @@ function CompactTimeline({ leg, hasStopOvers, onToggleStopOvers }) {
 					]
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-row w-full justify-between",
+					className: "flex flex-col sm:flex-row w-full justify-between",
 					children: [/* @__PURE__ */ jsxs("div", {
 						className: "flex flex-row gap-2",
 						children: [/* @__PURE__ */ jsx("span", {
@@ -10381,10 +10382,10 @@ const GiftCard = ({ className, amount, amountTotal, cardNumber, validUntilDate,.
 		className: "flex flex-col",
 		children: [
 			/* @__PURE__ */ jsxs("span", {
-				className: "mb-1.5",
+				className: "mb-1.5 text-xs sm:text-2xl",
 				children: [
 					/* @__PURE__ */ jsx("span", {
-						className: "text-2xl font-bold gift-card-amount",
+						className: "font-bold gift-card-amount",
 						children: setCurrencyValue(amount || "0")
 					}),
 					" / ",
@@ -10402,10 +10403,7 @@ const GiftCard = ({ className, amount, amountTotal, cardNumber, validUntilDate,.
 		]
 	}), /* @__PURE__ */ jsx("span", {
 		className: "flex items-center mr-3",
-		children: /* @__PURE__ */ jsx(IconPresent, {
-			width: 56,
-			height: 56
-		})
+		children: /* @__PURE__ */ jsx(IconPresent, { className: "size-[28px] sm:size-[56px]" })
 	})]
 });
 
@@ -10870,7 +10868,7 @@ const Coupon = ({ className, title, description, code, validUntil, image, backgr
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		"data-component": "coupon",
-		className: clsx(className, "rounded-lg w-fit relative"),
+		className: clsx(className, "rounded-lg w-full sm:w-fit relative"),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx("div", {
@@ -10889,7 +10887,7 @@ const Coupon = ({ className, title, description, code, validUntil, image, backgr
 							className: "font-bold text-secondary",
 							children: title
 						}), /* @__PURE__ */ jsx("p", {
-							className: "text-sm",
+							className: "text-xs sm:text-sm",
 							children: description
 						})]
 					})]
@@ -10906,11 +10904,11 @@ const Coupon = ({ className, title, description, code, validUntil, image, backgr
 						className: "text-primary uppercase flex flex-row items-center gap-1",
 						children: [
 							/* @__PURE__ */ jsx("span", {
-								className: "text-base",
+								className: "text-xs sm:text-base",
 								children: "Kortingscode:"
 							}),
 							/* @__PURE__ */ jsx("span", {
-								className: "font-bold",
+								className: "font-bold text-xs sm:text-base",
 								children: code
 							}),
 							/* @__PURE__ */ jsx("button", {
@@ -11223,54 +11221,60 @@ const PvPopup = ({ className, popupTitle, content, button, size, popover, popupI
 };
 
 //#endregion
-//#region src/components/bookModule/index.tsx
-const BookModuleButton = ({ className, label, labelOutside, icon, downIcon, onClick, selectedValue, secondarySelectedValue,...props }) => {
+//#region src/components/searchBlock/index.tsx
+const SearchBlockButton = ({ className, label, labelOutside, icon, downIcon, onClick, selectedValue, secondarySelectedValue,...props }) => {
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [labelOutside && /* @__PURE__ */ jsx("span", {
-		className: "bookModuleButtonLabel",
+		className: "searchBlockButtonLabel",
 		children: label
 	}), /* @__PURE__ */ jsxs("button", {
-		className: clsx(className, "bookModuleButton flex flex-row items-center justify-between gap-2 px-2"),
+		className: clsx(className, "searchBlockButton flex flex-row items-center justify-between gap-2 px-2 py-2"),
 		onClick,
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-row items-center justify-center gap-2",
 			children: [/* @__PURE__ */ jsx("span", {
-				className: "w-5 h-5 flex items-center justify-center bookModuleButtonIcon",
+				className: "w-5 h-auto sm:h-5 flex items-center justify-center searchBlockButtonIcon",
 				children: icon
 			}), /* @__PURE__ */ jsxs("span", {
 				className: "flex flex-col items-start justify-center",
 				children: [!labelOutside && /* @__PURE__ */ jsx("span", {
-					className: "bookModuleButtonLabel",
+					className: "searchBlockButtonLabel",
 					children: label
 				}), /* @__PURE__ */ jsxs("span", {
-					className: "bookModuleButtonSelectedValue",
+					className: "searchBlockButtonSelectedValue whitespace-nowrap flex flex-col sm:flex-row items-start sm:items-center",
 					children: [/* @__PURE__ */ jsx("span", {
 						className: `${secondarySelectedValue && "font-bold"}`,
 						children: selectedValue
-					}), secondarySelectedValue && ` - ${secondarySelectedValue}`]
+					}), secondarySelectedValue && /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-row gap-0 sm:gap-2 text-xs",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "hidden ml-0 sm:ml-2 sm:inline",
+							children: "-"
+						}), secondarySelectedValue]
+					})]
 				})]
 			})]
 		}), /* @__PURE__ */ jsx("span", {
-			className: "bookModuleButtonDownIcon",
+			className: "searchBlockButtonDownIcon",
 			children: downIcon
 		})]
 	})] });
 };
-const BookModule = ({ className, bookModuleTitle, bookModuleForm, onClickFn, "data-testid": dataTestId = "book-module",...props }) => {
+const SearchBlock = ({ className, SearchBlockTitle, SearchBlockForm, onClickFn, "data-testid": dataTestId = "book-module",...props }) => {
 	const brand = useBrand();
 	return /* @__PURE__ */ jsx("div", {
 		"data-component": "book-module",
 		"data-testid": dataTestId,
-		className: clsx(className, `bookModule w-[350px] ${brand === "dreizen" ? "p-8" : "p-4"}`),
+		className: clsx(className, `searchBlock w-full sm:w-[350px] ${brand === "dreizen" ? "p-8" : "p-4"}`),
 		...props,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: `flex flex-col ${brand === "prijsvrij" && "gap-2"}`,
 			children: [
 				/* @__PURE__ */ jsx("span", {
 					className: `${brand === "dreizen" && "mb-2"}`,
-					children: bookModuleTitle
+					children: SearchBlockTitle
 				}),
-				/* @__PURE__ */ jsx(BookModuleButton, {
+				/* @__PURE__ */ jsx(SearchBlockButton, {
 					labelOutside: brand === "dreizen",
 					selectedValue: "2 personen op 1 kamer",
 					label: "Reisgezelschap",
@@ -11278,7 +11282,7 @@ const BookModule = ({ className, bookModuleTitle, bookModuleForm, onClickFn, "da
 					downIcon: brand === "dreizen" ? /* @__PURE__ */ jsx(IconChevronRight, { className: " rotate-90" }) : /* @__PURE__ */ jsx(IconArrowDown, { className: "" }),
 					onClick: () => {}
 				}),
-				/* @__PURE__ */ jsx(BookModuleButton, {
+				/* @__PURE__ */ jsx(SearchBlockButton, {
 					labelOutside: brand === "dreizen",
 					selectedValue: "Alle landen",
 					label: "Bestemming",
@@ -11286,7 +11290,7 @@ const BookModule = ({ className, bookModuleTitle, bookModuleForm, onClickFn, "da
 					downIcon: brand === "dreizen" ? /* @__PURE__ */ jsx(IconChevronRight, { className: " rotate-90" }) : /* @__PURE__ */ jsx(IconArrowDown, { className: "" }),
 					onClick: () => {}
 				}),
-				/* @__PURE__ */ jsx(BookModuleButton, {
+				/* @__PURE__ */ jsx(SearchBlockButton, {
 					labelOutside: brand === "dreizen",
 					selectedValue: "De voordeligste datum",
 					secondarySelectedValue: "14 dagen",
@@ -11295,7 +11299,7 @@ const BookModule = ({ className, bookModuleTitle, bookModuleForm, onClickFn, "da
 					downIcon: brand === "dreizen" ? /* @__PURE__ */ jsx(IconChevronRight, { className: " rotate-90" }) : /* @__PURE__ */ jsx(IconArrowDown, { className: "" }),
 					onClick: () => {}
 				}),
-				/* @__PURE__ */ jsx(BookModuleButton, {
+				/* @__PURE__ */ jsx(SearchBlockButton, {
 					labelOutside: brand === "dreizen",
 					selectedValue: "Vliegreis",
 					secondarySelectedValue: "5 geselecteerd",
@@ -11416,5 +11420,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, BookModule, 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, Review, ReviewSmall, Reviews, ScrollToTop, 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 };
+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, 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 };
 //# sourceMappingURL=index.js.map