@prijsvrijtechsupport/ui 0.0.33 → 0.0.34

package/dist/components/searchBlock/index.d.ts

@@ -1,8 +1,8 @@
 interface SearchBlockProps {
     "data-testid"?: string;
     className?: string;
-    SearchBlockTitle?: string;
-    SearchBlockForm?: React.ReactNode;
+    searchBlockTitle?: string;
+    searchBlockForm?: React.ReactNode;
     onClickFn?: () => void;
 }
 interface SearchBlockButtonProps {
@@ -16,5 +16,5 @@ interface SearchBlockButtonProps {
     secondarySelectedValue?: string;
 }
 export declare const SearchBlockButton: ({ className, label, labelOutside, icon, downIcon, onClick, selectedValue, secondarySelectedValue, ...props }: SearchBlockButtonProps) => import("react/jsx-runtime").JSX.Element;
-export declare const SearchBlock: ({ className, SearchBlockTitle, SearchBlockForm, onClickFn, "data-testid": dataTestId, ...props }: SearchBlockProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SearchBlock: ({ className, searchBlockTitle, searchBlockForm, onClickFn, "data-testid": dataTestId, ...props }: SearchBlockProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.cjs

@@ -4756,7 +4756,7 @@ const FooterNavigation = ({ className, showIcon = true, columns = footerNavigati
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "max-w-7xl mx-auto",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "grid grid-rows-8 sm:grid-cols-8 gap-8",
+			className: "grid grid-rows-auto sm:grid-cols-8 gap-8",
 			children: columns.map((column, columnIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "col-span-2",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
@@ -5130,9 +5130,10 @@ function Slider({ slides, options, plugins, lazyLoad = false, showArrows = true,
 							const src = hasBeenInView ? originalSrc : LAZY_LOAD_PLACEHOLDER_SRC;
 							return (0, react.cloneElement)(slide, {
 								src,
-								"data-src": originalSrc
+								"data-src": originalSrc,
+								className: cn(slide.props.className, "h-auto")
 							});
-						})() : slide
+						})() : (0, react.isValidElement)(slide) ? (0, react.cloneElement)(slide, { className: cn(slide.props.className, "h-auto") }) : slide
 					}, index))
 				}), showDots && dotsPlacement === "inside" && scrollSnaps.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "pointer-events-none absolute inset-x-0 bottom-3 z-20 flex items-center justify-center gap-2 rounded-2xl bg-black/40 w-fit mx-auto p-1.5",
@@ -6877,11 +6878,11 @@ const PriceBox = ({ className, hotel, brand, noBorder = false, noHover = false,
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-testid": dataTestId,
 		"data-component": "price-box",
-		className: (0, clsx.default)("flex flex-col gap-4 md:gap-2 items-start bg-white cursor-pointer rounded-lg md:p-4 h-full justify-between w-full md:w-[222px] md:min-w-[222px] md:max-w-[222px] py-4", noBorder ? "border-transparent" : "border border-transparent md:border-[#ccc]", noHover ? "" : "hover:bg-primary-light-75", className),
+		className: (0, clsx.default)("flex flex-row md:flex-col gap-4 md:gap-2 items-start bg-white cursor-pointer rounded-lg md:p-4 h-full justify-between w-full md:w-[222px] md:min-w-[222px] md:max-w-[222px] py-4", noBorder ? "border-transparent" : "border border-transparent md:border-[#ccc]", noHover ? "" : "hover:bg-primary-light-75", className),
 		onClick,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: `${brand === "dreizen" && "items-end justify-end w-full"} hidden md:flex`,
+				className: `${brand === "dreizen" && "items-end justify-end w-full"} flex order-3 md:order-1`,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PriceCheck, {
 					price: hotel.Price,
 					text: hotel.PriceInfo
@@ -6927,7 +6928,7 @@ const PriceBox = ({ className, hotel, brand, noBorder = false, noHover = false,
 				]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "w-full",
+				className: "w-4/12 md:w-full",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 					variant: brand === "prijsvrij" ? "primaryGlow" : "secondary",
 					className: "whitespace-nowrap w-full md:w-auto",
@@ -9895,14 +9896,14 @@ const Hero = ({ className, sliderImages, topRightImage, bottomLeftImage, bottomR
 	className: (0, clsx.default)(className),
 	...props,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex flex-row",
+		className: "flex flex-col md:flex-row",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "grid aspect-[16/6] grid-cols-3 grid-rows-[2fr_1fr] gap-1",
+			className: "grid md:aspect-[16/6] md:grid-cols-3 md:grid-rows-[2fr_1fr] gap-1",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "col-span-2 row-span-2 overflow-hidden",
+					className: "md:col-span-2 md:row-span-2 overflow-hidden",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Slider, {
-						className: "h-full",
+						className: "h-full max-h-[340px] md:h-full",
 						slides: sliderImages.map((src, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 							src,
 							alt: `Hero slide ${index + 1}`,
@@ -9915,7 +9916,7 @@ const Hero = ({ className, sliderImages, topRightImage, bottomLeftImage, bottomR
 					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "col-span-1 row-span-1 overflow-hidden",
+					className: "hidden md:flex col-span-1 row-span-1 overflow-hidden",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 						src: topRightImage,
 						alt: "Hero image 1",
@@ -9923,7 +9924,7 @@ const Hero = ({ className, sliderImages, topRightImage, bottomLeftImage, bottomR
 					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "col-span-1 row-span-1 grid grid-cols-2 gap-1",
+					className: "hidden md:grid col-span-1 row-span-1 grid-cols-2 gap-1",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "overflow-hidden",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
@@ -11282,7 +11283,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, onClickFn, "data-testid": dataTestId = "book-module",...props }) => {
 	const brand = useBrand();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-component": "book-module",
@@ -11294,7 +11295,7 @@ const SearchBlock = ({ className, SearchBlockTitle, SearchBlockForm, onClickFn,
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: `${brand === "dreizen" && "mb-2"}`,
-					children: SearchBlockTitle
+					children: searchBlockTitle
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchBlockButton, {
 					labelOutside: brand === "dreizen",