@prijsvrijtechsupport/ui 0.0.44 → 0.0.46

package/dist/index.js

@@ -31,114 +31,118 @@ var variables_default = {};
 
 //#endregion
 //#region src/components/topMenu/styles.css
-var styles_default$27 = {};
+var styles_default$28 = {};
 
 //#endregion
 //#region src/components/button/styles.css
-var styles_default$26 = {};
+var styles_default$27 = {};
 
 //#endregion
 //#region src/components/priceCheck/styles.css
-var styles_default$25 = {};
+var styles_default$26 = {};
 
 //#endregion
 //#region src/components/toggle/styles.css
-var styles_default$24 = {};
+var styles_default$25 = {};
 
 //#endregion
 //#region src/components/topHeaderMenu/styles.css
-var styles_default$23 = {};
+var styles_default$24 = {};
 
 //#endregion
 //#region src/components/filterButtons/styles.css
-var styles_default$22 = {};
+var styles_default$23 = {};
 
 //#endregion
 //#region src/components/searchBox/styles.css
-var styles_default$21 = {};
+var styles_default$22 = {};
 
 //#endregion
 //#region src/components/dropdown/styles.css
-var styles_default$20 = {};
+var styles_default$21 = {};
 
 //#endregion
 //#region src/components/counterIcon/styles.css
-var styles_default$19 = {};
+var styles_default$20 = {};
 
 //#endregion
 //#region src/components/usp/styles.css
-var styles_default$18 = {};
+var styles_default$19 = {};
 
 //#endregion
 //#region src/components/middleNavigation/styles.css
-var styles_default$17 = {};
+var styles_default$18 = {};
 
 //#endregion
 //#region src/components/menu/styles.css
-var styles_default$16 = {};
+var styles_default$17 = {};
 
 //#endregion
 //#region src/components/footer/styles.css
-var styles_default$15 = {};
+var styles_default$16 = {};
 
 //#endregion
 //#region src/components/blogWidget/styles.css
-var styles_default$14 = {};
+var styles_default$15 = {};
 
 //#endregion
 //#region src/components/searchBlock/styles.css
-var styles_default$13 = {};
+var styles_default$14 = {};
 
 //#endregion
 //#region src/components/categoryFilter/styles.css
-var styles_default$12 = {};
+var styles_default$13 = {};
 
 //#endregion
 //#region src/components/collection/styles.css
-var styles_default$11 = {};
+var styles_default$12 = {};
 
 //#endregion
 //#region src/components/review/styles.css
-var styles_default$10 = {};
+var styles_default$11 = {};
 
 //#endregion
 //#region src/components/hotelAccomodationResults/styles.css
-var styles_default$9 = {};
+var styles_default$10 = {};
 
 //#endregion
 //#region src/components/coupon/styles.css
-var styles_default$8 = {};
+var styles_default$9 = {};
 
 //#endregion
 //#region src/components/giftCard/styles.css
-var styles_default$7 = {};
+var styles_default$8 = {};
 
 //#endregion
 //#region src/components/pvPopup/styles.css
-var styles_default$6 = {};
+var styles_default$7 = {};
 
 //#endregion
 //#region src/components/photoCardsRotated/styles.css
-var styles_default$5 = {};
+var styles_default$6 = {};
 
 //#endregion
 //#region src/components/spotlights/styles.css
-var styles_default$4 = {};
+var styles_default$5 = {};
 
 //#endregion
 //#region src/components/viewedAccomodations/styles.css
-var styles_default$3 = {};
+var styles_default$4 = {};
 
 //#endregion
 //#region src/components/quantityButtons/styles.css
-var styles_default$2 = {};
+var styles_default$3 = {};
 
 //#endregion
 //#region src/components/matrixTable/styles.css
-var styles_default$1 = {};
+var styles_default$2 = {};
 
 //#endregion
 //#region src/components/pageNavigation/styles.css
+var styles_default$1 = {};
+
+//#endregion
+//#region src/components/calendar/styles.css
 var styles_default = {};
 
 //#endregion
@@ -4114,10 +4118,18 @@ const PageRating = ({ rating, ratingsCount, text, className }) => {
 		if (boxRating > 0) {
 			if (roundedRating % 1 !== 0) {
 				const halfColorIndex = Math.floor(roundedRating) * 2 - 1;
-				ratingColor = RATING_COLORS[Math.min(halfColorIndex, RATING_COLORS.length - 1)] || "#FB3C00";
+				if (halfColorIndex >= 0 && halfColorIndex < RATING_COLORS.length && RATING_COLORS[halfColorIndex]) {
+					ratingColor = RATING_COLORS[halfColorIndex];
+				} else {
+					ratingColor = "#FB3C00";
+				}
 			} else {
 				const fullColorIndex = Math.floor(boxRating) * 2 - 2;
-				ratingColor = RATING_COLORS[Math.min(fullColorIndex, RATING_COLORS.length - 1)] || "#FB3C00";
+				if (fullColorIndex >= 0 && fullColorIndex < RATING_COLORS.length && RATING_COLORS[fullColorIndex]) {
+					ratingColor = RATING_COLORS[fullColorIndex];
+				} else {
+					ratingColor = "#FB3C00";
+				}
 			}
 		}
 		return /* @__PURE__ */ jsx("div", {
@@ -4814,14 +4826,17 @@ const AccordionItem = ({ className, item, isOpen, onToggle,...props }) => {
 	const icon = resolvedIsOpen ? item.iconOpen ?? iconOpenFallback : item.iconClosed ?? iconClosedFallback;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-component": "pv-accordion",
-		className: clsx(className, "divide-y divide-gray-200"),
+		className: clsx(className, "divide-y divide-[#e0e0e0]"),
 		...props,
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
 			className: "flex justify-between w-full py-4 items-center",
 			"aria-expanded": resolvedIsOpen,
 			onClick: () => onToggle ? onToggle() : setUncontrolledIsOpen((v) => !v),
-			children: [/* @__PURE__ */ jsx("span", { children: item.title }), /* @__PURE__ */ jsx("span", {
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-start",
+				children: item.title
+			}), /* @__PURE__ */ jsx("span", {
 				className: "w-10 h-10 items-center flex",
 				children: icon
 			})]
@@ -8904,77 +8919,77 @@ const iconOptions = [
 	"IconWinterSport",
 	"IconWinterSun"
 ];
-const getIcon = (iconName) => {
+const getIcon = (iconName, color) => {
 	const iconMap$1 = {
-		IconAlert: /* @__PURE__ */ jsx(IconAlert, { className: "w-full h-full" }),
-		IconArrival: /* @__PURE__ */ jsx(IconArrival, { className: "w-full h-full" }),
-		IconArrowDown: /* @__PURE__ */ jsx(IconArrowDown, { className: "w-full h-full" }),
-		IconArrowLeft: /* @__PURE__ */ jsx(IconArrowLeft, { className: "w-full h-full" }),
-		IconArrowRight: /* @__PURE__ */ jsx(IconArrowRight, { className: "w-full h-full" }),
-		IconArrowUp: /* @__PURE__ */ jsx(IconArrowUp, { className: "w-full h-full" }),
-		IconBeach: /* @__PURE__ */ jsx(IconBeach, { className: "w-full h-full" }),
-		IconBed: /* @__PURE__ */ jsx(IconBed, { className: "w-full h-full" }),
-		IconBlog: /* @__PURE__ */ jsx(IconBlog, { className: "w-full h-full" }),
-		IconBus: /* @__PURE__ */ jsx(IconBus, { className: "w-full h-full" }),
-		IconCalendar: /* @__PURE__ */ jsx(IconCalendar, { className: "w-full h-full" }),
-		IconCancel: /* @__PURE__ */ jsx(IconCancel, { className: "w-full h-full" }),
-		IconCar: /* @__PURE__ */ jsx(IconCar, { className: "w-full h-full" }),
-		IconCarSun: /* @__PURE__ */ jsx(IconCarSun, { className: "w-full h-full" }),
-		IconCheck: /* @__PURE__ */ jsx(IconCheck, { className: "w-full h-full" }),
-		IconChevronRight: /* @__PURE__ */ jsx(IconChevronRight, { className: "w-full h-full" }),
-		IconCity: /* @__PURE__ */ jsx(IconCity, { className: "w-full h-full" }),
-		IconClock: /* @__PURE__ */ jsx(IconClock, { className: "w-full h-full" }),
-		IconDelete: /* @__PURE__ */ jsx(IconDelete, { className: "w-full h-full" }),
-		IconDeparture: /* @__PURE__ */ jsx(IconDeparture, { className: "w-full h-full" }),
-		IconDollar: /* @__PURE__ */ jsx(IconDollar, { className: "w-full h-full" }),
-		IconEdit: /* @__PURE__ */ jsx(IconEdit, { className: "w-full h-full" }),
-		IconExpand: /* @__PURE__ */ jsx(IconExpand, { className: "w-full h-full" }),
-		IconFacebook: /* @__PURE__ */ jsx(IconFacebook, { className: "w-full h-full" }),
-		IconFavorite: /* @__PURE__ */ jsx(IconFavorite, { className: "w-full h-full" }),
-		IconFilter: /* @__PURE__ */ jsx(IconFilter, { className: "w-full h-full" }),
-		IconFood: /* @__PURE__ */ jsx(IconFood, { className: "w-full h-full" }),
-		IconHeart: /* @__PURE__ */ jsx(IconHeart, { className: "w-full h-full" }),
-		IconHot: /* @__PURE__ */ jsx(IconHot, { className: "w-full h-full" }),
-		IconHotel: /* @__PURE__ */ jsx(IconHotel, { className: "w-full h-full" }),
-		IconHouse: /* @__PURE__ */ jsx(IconHouse, { className: "w-full h-full" }),
-		IconInfo: /* @__PURE__ */ jsx(IconInfo, { className: "w-full h-full" }),
-		IconInstagram: /* @__PURE__ */ jsx(IconInstagram, { className: "w-full h-full" }),
-		IconLuggage: /* @__PURE__ */ jsx(IconLuggage, { className: "w-full h-full" }),
-		IconMail: /* @__PURE__ */ jsx(IconMail, { className: "w-full h-full" }),
-		IconMap: /* @__PURE__ */ jsx(IconMap, { className: "w-full h-full" }),
-		IconMinus: /* @__PURE__ */ jsx(IconMinus, { className: "w-full h-full" }),
-		IconParty: /* @__PURE__ */ jsx(IconParty, { className: "w-full h-full" }),
-		IconPhone: /* @__PURE__ */ jsx(IconPhone, { className: "w-full h-full" }),
-		IconPhoto: /* @__PURE__ */ jsx(IconPhoto, { className: "w-full h-full" }),
-		IconPinterest: /* @__PURE__ */ jsx(IconPinterest, { className: "w-full h-full" }),
-		IconPlane: /* @__PURE__ */ jsx(IconPlane, { className: "w-full h-full" }),
-		IconPlus: /* @__PURE__ */ jsx(IconPlus, { className: "w-full h-full" }),
-		IconQuestion: /* @__PURE__ */ jsx(IconQuestion, { className: "w-full h-full" }),
-		IconRating: /* @__PURE__ */ jsx(IconRating, { className: "w-full h-full" }),
-		IconSearch: /* @__PURE__ */ jsx(IconSearch, { className: "w-full h-full" }),
-		IconSeat: /* @__PURE__ */ jsx(IconSeat, { className: "w-full h-full" }),
-		IconShare: /* @__PURE__ */ jsx(IconShare, { className: "w-full h-full" }),
-		IconSplash: /* @__PURE__ */ jsx(IconSplash, { className: "w-full h-full" }),
-		IconStar: /* @__PURE__ */ jsx(IconStar, { className: "w-full h-full" }),
-		IconSuccess: /* @__PURE__ */ jsx(IconSuccess, { className: "w-full h-full" }),
-		IconSun: /* @__PURE__ */ jsx(IconSun, { className: "w-full h-full" }),
-		IconSupport: /* @__PURE__ */ jsx(IconSupport, { className: "w-full h-full" }),
-		IconTemperature: /* @__PURE__ */ jsx(IconTemperature, { className: "w-full h-full" }),
-		IconTiktok: /* @__PURE__ */ jsx(IconTiktok, { className: "w-full h-full" }),
-		IconTransfer: /* @__PURE__ */ jsx(IconTransfer, { className: "w-full h-full" }),
-		IconTree: /* @__PURE__ */ jsx(IconTree, { className: "w-full h-full" }),
-		IconTwitter: /* @__PURE__ */ jsx(IconTwitter, { className: "w-full h-full" }),
-		IconUser: /* @__PURE__ */ jsx(IconUser, { className: "w-full h-full" }),
-		IconView: /* @__PURE__ */ jsx(IconView, { className: "w-full h-full" }),
-		IconWarning: /* @__PURE__ */ jsx(IconWarning, { className: "w-full h-full" }),
-		IconWhatsapp: /* @__PURE__ */ jsx(IconWhatsapp, { className: "w-full h-full" }),
-		IconWinterSport: /* @__PURE__ */ jsx(IconWinterSport, { className: "w-full h-full" }),
-		IconWinterSun: /* @__PURE__ */ jsx(IconWinterSun, { className: "w-full h-full" })
+		IconAlert: /* @__PURE__ */ jsx(IconAlert, { className: clsx("w-full h-full", color) }),
+		IconArrival: /* @__PURE__ */ jsx(IconArrival, { className: clsx("w-full h-full", color) }),
+		IconArrowDown: /* @__PURE__ */ jsx(IconArrowDown, { className: clsx("w-full h-full", color) }),
+		IconArrowLeft: /* @__PURE__ */ jsx(IconArrowLeft, { className: clsx("w-full h-full", color) }),
+		IconArrowRight: /* @__PURE__ */ jsx(IconArrowRight, { className: clsx("w-full h-full", color) }),
+		IconArrowUp: /* @__PURE__ */ jsx(IconArrowUp, { className: clsx("w-full h-full", color) }),
+		IconBeach: /* @__PURE__ */ jsx(IconBeach, { className: clsx("w-full h-full", color) }),
+		IconBed: /* @__PURE__ */ jsx(IconBed, { className: clsx("w-full h-full", color) }),
+		IconBlog: /* @__PURE__ */ jsx(IconBlog, { className: clsx("w-full h-full", color) }),
+		IconBus: /* @__PURE__ */ jsx(IconBus, { className: clsx("w-full h-full", color) }),
+		IconCalendar: /* @__PURE__ */ jsx(IconCalendar, { className: clsx("w-full h-full", color) }),
+		IconCancel: /* @__PURE__ */ jsx(IconCancel, { className: clsx("w-full h-full", color) }),
+		IconCar: /* @__PURE__ */ jsx(IconCar, { className: clsx("w-full h-full", color) }),
+		IconCarSun: /* @__PURE__ */ jsx(IconCarSun, { className: clsx("w-full h-full", color) }),
+		IconCheck: /* @__PURE__ */ jsx(IconCheck, { className: clsx("w-full h-full", color) }),
+		IconChevronRight: /* @__PURE__ */ jsx(IconChevronRight, { className: clsx("w-full h-full", color) }),
+		IconCity: /* @__PURE__ */ jsx(IconCity, { className: clsx("w-full h-full", color) }),
+		IconClock: /* @__PURE__ */ jsx(IconClock, { className: clsx("w-full h-full", color) }),
+		IconDelete: /* @__PURE__ */ jsx(IconDelete, { className: clsx("w-full h-full", color) }),
+		IconDeparture: /* @__PURE__ */ jsx(IconDeparture, { className: clsx("w-full h-full", color) }),
+		IconDollar: /* @__PURE__ */ jsx(IconDollar, { className: clsx("w-full h-full", color) }),
+		IconEdit: /* @__PURE__ */ jsx(IconEdit, { className: clsx("w-full h-full", color) }),
+		IconExpand: /* @__PURE__ */ jsx(IconExpand, { className: clsx("w-full h-full", color) }),
+		IconFacebook: /* @__PURE__ */ jsx(IconFacebook, { className: clsx("w-full h-full", color) }),
+		IconFavorite: /* @__PURE__ */ jsx(IconFavorite, { className: clsx("w-full h-full", color) }),
+		IconFilter: /* @__PURE__ */ jsx(IconFilter, { className: clsx("w-full h-full", color) }),
+		IconFood: /* @__PURE__ */ jsx(IconFood, { className: clsx("w-full h-full", color) }),
+		IconHeart: /* @__PURE__ */ jsx(IconHeart, { className: clsx("w-full h-full", color) }),
+		IconHot: /* @__PURE__ */ jsx(IconHot, { className: clsx("w-full h-full", color) }),
+		IconHotel: /* @__PURE__ */ jsx(IconHotel, { className: clsx("w-full h-full", color) }),
+		IconHouse: /* @__PURE__ */ jsx(IconHouse, { className: clsx("w-full h-full", color) }),
+		IconInfo: /* @__PURE__ */ jsx(IconInfo, { className: clsx("w-full h-full", color) }),
+		IconInstagram: /* @__PURE__ */ jsx(IconInstagram, { className: clsx("w-full h-full", color) }),
+		IconLuggage: /* @__PURE__ */ jsx(IconLuggage, { className: clsx("w-full h-full", color) }),
+		IconMail: /* @__PURE__ */ jsx(IconMail, { className: clsx("w-full h-full", color) }),
+		IconMap: /* @__PURE__ */ jsx(IconMap, { className: clsx("w-full h-full", color) }),
+		IconMinus: /* @__PURE__ */ jsx(IconMinus, { className: clsx("w-full h-full", color) }),
+		IconParty: /* @__PURE__ */ jsx(IconParty, { className: clsx("w-full h-full", color) }),
+		IconPhone: /* @__PURE__ */ jsx(IconPhone, { className: clsx("w-full h-full", color) }),
+		IconPhoto: /* @__PURE__ */ jsx(IconPhoto, { className: clsx("w-full h-full", color) }),
+		IconPinterest: /* @__PURE__ */ jsx(IconPinterest, { className: clsx("w-full h-full", color) }),
+		IconPlane: /* @__PURE__ */ jsx(IconPlane, { className: clsx("w-full h-full", color) }),
+		IconPlus: /* @__PURE__ */ jsx(IconPlus, { className: clsx("w-full h-full", color) }),
+		IconQuestion: /* @__PURE__ */ jsx(IconQuestion, { className: clsx("w-full h-full", color) }),
+		IconRating: /* @__PURE__ */ jsx(IconRating, { className: clsx("w-full h-full", color) }),
+		IconSearch: /* @__PURE__ */ jsx(IconSearch, { className: clsx("w-full h-full", color) }),
+		IconSeat: /* @__PURE__ */ jsx(IconSeat, { className: clsx("w-full h-full", color) }),
+		IconShare: /* @__PURE__ */ jsx(IconShare, { className: clsx("w-full h-full", color) }),
+		IconSplash: /* @__PURE__ */ jsx(IconSplash, { className: clsx("w-full h-full", color) }),
+		IconStar: /* @__PURE__ */ jsx(IconStar, { className: clsx("w-full h-full", color) }),
+		IconSuccess: /* @__PURE__ */ jsx(IconSuccess, { className: clsx("w-full h-full", color) }),
+		IconSun: /* @__PURE__ */ jsx(IconSun, { className: clsx("w-full h-full", color) }),
+		IconSupport: /* @__PURE__ */ jsx(IconSupport, { className: clsx("w-full h-full", color) }),
+		IconTemperature: /* @__PURE__ */ jsx(IconTemperature, { className: clsx("w-full h-full", color) }),
+		IconTiktok: /* @__PURE__ */ jsx(IconTiktok, { className: clsx("w-full h-full", color) }),
+		IconTransfer: /* @__PURE__ */ jsx(IconTransfer, { className: clsx("w-full h-full", color) }),
+		IconTree: /* @__PURE__ */ jsx(IconTree, { className: clsx("w-full h-full", color) }),
+		IconTwitter: /* @__PURE__ */ jsx(IconTwitter, { className: clsx("w-full h-full", color) }),
+		IconUser: /* @__PURE__ */ jsx(IconUser, { className: clsx("w-full h-full", color) }),
+		IconView: /* @__PURE__ */ jsx(IconView, { className: clsx("w-full h-full", color) }),
+		IconWarning: /* @__PURE__ */ jsx(IconWarning, { className: clsx("w-full h-full", color) }),
+		IconWhatsapp: /* @__PURE__ */ jsx(IconWhatsapp, { className: clsx("w-full h-full", color) }),
+		IconWinterSport: /* @__PURE__ */ jsx(IconWinterSport, { className: clsx("w-full h-full", color) }),
+		IconWinterSun: /* @__PURE__ */ jsx(IconWinterSun, { className: clsx("w-full h-full", color) })
 	};
 	const icon = iconMap$1[iconName];
 	if (!icon) {
 		console.warn(`Icon "${iconName}" not found, returning fallback`);
-		return /* @__PURE__ */ jsx(IconArrowDown, { className: "w-full h-full" });
+		return /* @__PURE__ */ jsx(IconArrowDown, { className: clsx("w-full h-full", color) });
 	}
 	return icon;
 };
@@ -9014,13 +9029,13 @@ const CategoryFilter = ({ className, categories, defaultActiveId, onCategoryChan
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-row gap-2 relative",
 			children: [categories.map((category) => {
-				const formattedIcon = category.icon ? formatIcon(getIcon(category.icon), { className: clsx("size-[1rem]") }) : null;
+				const formattedIcon = category.icon ? formatIcon(getIcon(category.icon), { className: clsx("size-6") }) : null;
 				return /* @__PURE__ */ jsxs("div", {
 					ref: (el) => categoryRefs.current[category.id] = el,
 					className: clsx("flex items-center gap-2 cursor-pointer px-3 py-3 rounded transition-colors whitespace-nowrap"),
 					onClick: () => handleCategoryClick(category.id),
 					children: [/* @__PURE__ */ jsx("span", {
-						className: `h-4 w-4 flex items-center justify-center ${activeId === category.id && "text-primary"}`,
+						className: `h-6 w-6 flex items-center justify-center ${activeId === category.id && "text-primary"}`,
 						children: formattedIcon
 					}), /* @__PURE__ */ jsx("span", {
 						className: `text-dark-600 ${activeId === category.id && "text-primary"}`,
@@ -9075,13 +9090,13 @@ const Calendar = ({ className, month, year = 2026,...props }) => {
 	]);
 	const resolvedSelectedDay = selectedDay ?? defaultSelectableDay;
 	const weekdayLabels = [
-		"ma",
-		"di",
-		"wo",
-		"do",
-		"vr",
-		"za",
-		"zo"
+		"Ma",
+		"Di",
+		"Wo",
+		"Do",
+		"Vr",
+		"Za",
+		"Zo"
 	];
 	const range = useMemo(() => {
 		if (!resolvedSelectedDay) return 0;
@@ -9146,113 +9161,120 @@ const Calendar = ({ className, month, year = 2026,...props }) => {
 		"data-component": "calendar",
 		className: clsx(className, "w-full"),
 		...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 whitespace-nowrap",
-				children: firstOfMonth.toLocaleDateString("nl-NL", {
-					month: "long",
-					year: "numeric"
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-end gap-4 mb-3",
+				children: /* @__PURE__ */ jsxs("select", {
+					"data-testid": "calendar-mode",
+					className: "border border-gray-200 rounded px-2 py-1 text-sm",
+					value: mode,
+					onChange: (e) => setMode(e.target.value),
+					children: [
+						/* @__PURE__ */ jsx("option", {
+							value: "exact",
+							children: "Exacte datum"
+						}),
+						/* @__PURE__ */ jsx("option", {
+							value: "pm1",
+							children: "+/- 1 dag"
+						}),
+						/* @__PURE__ */ jsx("option", {
+							value: "pm2",
+							children: "+/- 2 dagen"
+						}),
+						/* @__PURE__ */ jsx("option", {
+							value: "pm3",
+							children: "+/- 3 dagen"
+						}),
+						/* @__PURE__ */ jsx("option", {
+							value: "month",
+							children: "Hele maand"
+						})
+					]
 				})
-			}), /* @__PURE__ */ jsxs("select", {
-				"data-testid": "calendar-mode",
-				className: "border border-gray-200 rounded px-2 py-1 text-sm",
-				value: mode,
-				onChange: (e) => setMode(e.target.value),
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-center gap-4 mb-3",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "text-sm text-secondary font-bold whitespace-nowrap",
+					children: firstOfMonth.toLocaleDateString("nl-NL", {
+						month: "long",
+						year: "numeric"
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-7 gap-0",
+				"data-testid": "calendar-grid",
 				children: [
-					/* @__PURE__ */ jsx("option", {
-						value: "exact",
-						children: "Exacte datum"
-					}),
-					/* @__PURE__ */ jsx("option", {
-						value: "pm1",
-						children: "+/- 1 dag"
-					}),
-					/* @__PURE__ */ jsx("option", {
-						value: "pm2",
-						children: "+/- 2 dagen"
+					weekdayLabels.map((label) => /* @__PURE__ */ jsx("div", {
+						className: "text-base font-normal calendar-day-color text-center py-2",
+						children: label
+					}, label)),
+					Array.from({ length: mondayIndex }).map((_, i) => {
+						const day = daysInPrevMonth - mondayIndex + i + 1;
+						const prevDate = new Date(year, month - 1, day);
+						const yyyy = String(prevDate.getFullYear());
+						const mm = String(prevDate.getMonth() + 1).padStart(2, "0");
+						const dd = String(prevDate.getDate()).padStart(2, "0");
+						const testId = `calendar-day-outside-${yyyy}-${mm}-${dd}`;
+						return /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"data-testid": testId,
+							className: "h-10 rounded text-sm flex items-center justify-center text-gray-300 cursor-not-allowed",
+							disabled: true,
+							"aria-pressed": false,
+							children: day
+						}, testId);
 					}),
-					/* @__PURE__ */ jsx("option", {
-						value: "pm3",
-						children: "+/- 3 dagen"
+					Array.from({ length: daysInMonth }).map((_, i) => {
+						const day = i + 1;
+						const date = new Date(year, month, day);
+						const disabled = isPastDate(date);
+						const active = isActive(day);
+						const subActive = isSubActive(day);
+						const inRange = !disabled && (subActive || active && mode !== "exact");
+						const isRangeStart = !!rangeBounds && day === rangeBounds.start;
+						const isRangeEnd = !!rangeBounds && day === rangeBounds.end;
+						const leftFade = !!rangeBounds && rangeBounds.leftOverflow && day === 1;
+						const rightFade = !!rangeBounds && rangeBounds.rightOverflow && day === daysInMonth;
+						const rangeBgClass = !inRange ? null : leftFade ? "bg-gradient-to-r from-transparent via-primary/5 to-primary/5 " : rightFade ? "bg-gradient-to-r from-primary/5 via-primary/5 to-transparent " : "bg-primary/5";
+						const yyyy = String(year);
+						const mm = String(month + 1).padStart(2, "0");
+						const dd = String(day).padStart(2, "0");
+						const testId = `calendar-day-${yyyy}-${mm}-${dd}`;
+						return /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"data-testid": testId,
+							className: clsx("h-10 text-sm flex items-center justify-center", disabled && "text-gray-300 cursor-not-allowed", rangeBgClass, inRange && isRangeStart && "rounded-l-full", inRange && isRangeEnd && "rounded-r-full"),
+							disabled,
+							"aria-pressed": active,
+							onClick: () => handleDayClick(day),
+							children: /* @__PURE__ */ jsx("span", {
+								className: clsx("w-8 h-8 p-2 flex justify-center items-center cursor-pointer", active && "calendar-selected-bg text-white rounded-full ", !disabled && !active && !subActive && "hover:bg-primary/20 hover:rounded-full "),
+								children: day
+							})
+						}, testId);
 					}),
-					/* @__PURE__ */ jsx("option", {
-						value: "month",
-						children: "Hele maand"
+					Array.from({ length: trailingOutsideDays }).map((_, i) => {
+						const day = i + 1;
+						const nextDate = new Date(year, month + 1, day);
+						const yyyy = String(nextDate.getFullYear());
+						const mm = String(nextDate.getMonth() + 1).padStart(2, "0");
+						const dd = String(nextDate.getDate()).padStart(2, "0");
+						const testId = `calendar-day-outside-${yyyy}-${mm}-${dd}`;
+						return /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"data-testid": testId,
+							className: "h-10 rounded text-sm flex items-center calendar-grayed-out-date justify-center cursor-not-allowed",
+							disabled: true,
+							"aria-pressed": false,
+							children: day
+						}, testId);
 					})
 				]
-			})]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "grid grid-cols-7 gap-0",
-			"data-testid": "calendar-grid",
-			children: [
-				weekdayLabels.map((label) => /* @__PURE__ */ jsx("div", {
-					className: "text-xs font-semibold text-gray-600 text-center py-2",
-					children: label
-				}, label)),
-				Array.from({ length: mondayIndex }).map((_, i) => {
-					const day = daysInPrevMonth - mondayIndex + i + 1;
-					const prevDate = new Date(year, month - 1, day);
-					const yyyy = String(prevDate.getFullYear());
-					const mm = String(prevDate.getMonth() + 1).padStart(2, "0");
-					const dd = String(prevDate.getDate()).padStart(2, "0");
-					const testId = `calendar-day-outside-${yyyy}-${mm}-${dd}`;
-					return /* @__PURE__ */ jsx("button", {
-						type: "button",
-						"data-testid": testId,
-						className: "h-10 rounded text-sm flex items-center justify-center text-gray-300 cursor-not-allowed",
-						disabled: true,
-						"aria-pressed": false,
-						children: day
-					}, testId);
-				}),
-				Array.from({ length: daysInMonth }).map((_, i) => {
-					const day = i + 1;
-					const date = new Date(year, month, day);
-					const disabled = isPastDate(date);
-					const active = isActive(day);
-					const subActive = isSubActive(day);
-					const inRange = !disabled && (subActive || active && mode !== "exact");
-					const isRangeStart = !!rangeBounds && day === rangeBounds.start;
-					const isRangeEnd = !!rangeBounds && day === rangeBounds.end;
-					const leftFade = !!rangeBounds && rangeBounds.leftOverflow && day === 1;
-					const rightFade = !!rangeBounds && rangeBounds.rightOverflow && day === daysInMonth;
-					const rangeBgClass = !inRange ? null : leftFade ? "bg-gradient-to-r from-transparent via-primary/5 to-primary/5 " : rightFade ? "bg-gradient-to-r from-primary/5 via-primary/5 to-transparent " : "bg-primary/5";
-					const yyyy = String(year);
-					const mm = String(month + 1).padStart(2, "0");
-					const dd = String(day).padStart(2, "0");
-					const testId = `calendar-day-${yyyy}-${mm}-${dd}`;
-					return /* @__PURE__ */ jsx("button", {
-						type: "button",
-						"data-testid": testId,
-						className: clsx("h-10 text-sm flex items-center justify-center", disabled && "text-gray-300 cursor-not-allowed", rangeBgClass, inRange && isRangeStart && "rounded-l-full", inRange && isRangeEnd && "rounded-r-full"),
-						disabled,
-						"aria-pressed": active,
-						onClick: () => handleDayClick(day),
-						children: /* @__PURE__ */ jsx("span", {
-							className: clsx("w-8 h-8 p-2 flex justify-center items-center cursor-pointer", active && "bg-primary text-white rounded-full ", !disabled && !active && !subActive && "hover:bg-primary/20 hover:rounded-full "),
-							children: day
-						})
-					}, testId);
-				}),
-				Array.from({ length: trailingOutsideDays }).map((_, i) => {
-					const day = i + 1;
-					const nextDate = new Date(year, month + 1, day);
-					const yyyy = String(nextDate.getFullYear());
-					const mm = String(nextDate.getMonth() + 1).padStart(2, "0");
-					const dd = String(nextDate.getDate()).padStart(2, "0");
-					const testId = `calendar-day-outside-${yyyy}-${mm}-${dd}`;
-					return /* @__PURE__ */ jsx("button", {
-						type: "button",
-						"data-testid": testId,
-						className: "h-10 rounded text-sm flex items-center justify-center text-gray-300 cursor-not-allowed",
-						disabled: true,
-						"aria-pressed": false,
-						children: day
-					}, testId);
-				})
-			]
-		})]
+			})
+		]
 	});
 };
 
@@ -10927,10 +10949,10 @@ const BlogWidget = ({ className, blogTitle, blogText, blogImage, buttonText, But
 		className: "p-4 flex flex-col",
 		children: [
 			/* @__PURE__ */ jsxs("span", {
-				className: "text-primary text-xs blog-widget-date font-bold",
+				className: "text-xs blog-widget-date font-bold",
 				children: [new Date().toLocaleDateString("nl-NL"), readingTime && /* @__PURE__ */ jsx("span", {
 					className: "uppercase",
-					children: ` - ${readingTime}`
+					children: ` - Leestijd: ${readingTime}`
 				})]
 			}),
 			/* @__PURE__ */ jsx("span", {
@@ -10943,9 +10965,8 @@ const BlogWidget = ({ className, blogTitle, blogText, blogImage, buttonText, But
 			}),
 			/* @__PURE__ */ jsx(Button, {
 				variant: "outline",
-				className: "w-fit",
+				className: "w-fit uppercase",
 				iconRight: true,
-				icon: /* @__PURE__ */ jsx(IconArrowRight, {}),
 				onClick: ButtonAction,
 				children: buttonText
 			})