@prijsvrijtechsupport/ui 0.0.48 → 0.0.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -9,6 +9,7 @@ import { twMerge } from "tailwind-merge";
9
9
  import { useInView } from "react-intersection-observer";
10
10
  import moment from "moment";
11
11
  import useEmblaCarousel from "embla-carousel-react";
12
+ import AutoHeight from "embla-carousel-auto-height";
12
13
  import { differenceInMinutes, format, parse } from "date-fns";
13
14
  import { nl } from "date-fns/locale";
14
15
 
@@ -27,118 +28,126 @@ var variables_default = {};
27
28
 
28
29
  //#endregion
29
30
  //#region src/components/topMenu/styles.css
30
- var styles_default$28 = {};
31
+ var styles_default$30 = {};
31
32
 
32
33
  //#endregion
33
34
  //#region src/components/button/styles.css
34
- var styles_default$27 = {};
35
+ var styles_default$29 = {};
35
36
 
36
37
  //#endregion
37
38
  //#region src/components/priceCheck/styles.css
38
- var styles_default$26 = {};
39
+ var styles_default$28 = {};
39
40
 
40
41
  //#endregion
41
42
  //#region src/components/toggle/styles.css
42
- var styles_default$25 = {};
43
+ var styles_default$27 = {};
43
44
 
44
45
  //#endregion
45
46
  //#region src/components/topHeaderMenu/styles.css
46
- var styles_default$24 = {};
47
+ var styles_default$26 = {};
47
48
 
48
49
  //#endregion
49
50
  //#region src/components/filterButton/styles.css
50
- var styles_default$23 = {};
51
+ var styles_default$25 = {};
51
52
 
52
53
  //#endregion
53
54
  //#region src/components/searchBox/styles.css
54
- var styles_default$22 = {};
55
+ var styles_default$24 = {};
55
56
 
56
57
  //#endregion
57
58
  //#region src/components/dropdown/styles.css
58
- var styles_default$21 = {};
59
+ var styles_default$23 = {};
59
60
 
60
61
  //#endregion
61
62
  //#region src/components/counterIcon/styles.css
62
- var styles_default$20 = {};
63
+ var styles_default$22 = {};
63
64
 
64
65
  //#endregion
65
66
  //#region src/components/usp/styles.css
66
- var styles_default$19 = {};
67
+ var styles_default$21 = {};
67
68
 
68
69
  //#endregion
69
70
  //#region src/components/middleNavigation/styles.css
70
- var styles_default$18 = {};
71
+ var styles_default$20 = {};
71
72
 
72
73
  //#endregion
73
74
  //#region src/components/menu/styles.css
74
- var styles_default$17 = {};
75
+ var styles_default$19 = {};
75
76
 
76
77
  //#endregion
77
78
  //#region src/components/footer/styles.css
78
- var styles_default$16 = {};
79
+ var styles_default$18 = {};
79
80
 
80
81
  //#endregion
81
82
  //#region src/components/blogWidget/styles.css
82
- var styles_default$15 = {};
83
+ var styles_default$17 = {};
83
84
 
84
85
  //#endregion
85
86
  //#region src/components/searchBlock/styles.css
86
- var styles_default$14 = {};
87
+ var styles_default$16 = {};
87
88
 
88
89
  //#endregion
89
90
  //#region src/components/categoryFilter/styles.css
90
- var styles_default$13 = {};
91
+ var styles_default$15 = {};
91
92
 
92
93
  //#endregion
93
94
  //#region src/components/collection/styles.css
94
- var styles_default$12 = {};
95
+ var styles_default$14 = {};
95
96
 
96
97
  //#endregion
97
98
  //#region src/components/review/styles.css
98
- var styles_default$11 = {};
99
+ var styles_default$13 = {};
99
100
 
100
101
  //#endregion
101
102
  //#region src/components/hotelAccomodationResults/styles.css
102
- var styles_default$10 = {};
103
+ var styles_default$12 = {};
103
104
 
104
105
  //#endregion
105
106
  //#region src/components/coupon/styles.css
106
- var styles_default$9 = {};
107
+ var styles_default$11 = {};
107
108
 
108
109
  //#endregion
109
110
  //#region src/components/giftCard/styles.css
110
- var styles_default$8 = {};
111
+ var styles_default$10 = {};
111
112
 
112
113
  //#endregion
113
114
  //#region src/components/pvPopup/styles.css
114
- var styles_default$7 = {};
115
+ var styles_default$9 = {};
115
116
 
116
117
  //#endregion
117
118
  //#region src/components/photoCardsRotated/styles.css
118
- var styles_default$6 = {};
119
+ var styles_default$8 = {};
119
120
 
120
121
  //#endregion
121
122
  //#region src/components/spotlights/styles.css
122
- var styles_default$5 = {};
123
+ var styles_default$7 = {};
123
124
 
124
125
  //#endregion
125
126
  //#region src/components/viewedAccomodations/styles.css
126
- var styles_default$4 = {};
127
+ var styles_default$6 = {};
127
128
 
128
129
  //#endregion
129
130
  //#region src/components/quantityButtons/styles.css
130
- var styles_default$3 = {};
131
+ var styles_default$5 = {};
131
132
 
132
133
  //#endregion
133
134
  //#region src/components/matrixTable/styles.css
134
- var styles_default$2 = {};
135
+ var styles_default$4 = {};
135
136
 
136
137
  //#endregion
137
138
  //#region src/components/pageNavigation/styles.css
138
- var styles_default$1 = {};
139
+ var styles_default$3 = {};
139
140
 
140
141
  //#endregion
141
142
  //#region src/components/calendar/styles.css
143
+ var styles_default$2 = {};
144
+
145
+ //#endregion
146
+ //#region src/components/slider/styles.css
147
+ var styles_default$1 = {};
148
+
149
+ //#endregion
150
+ //#region src/components/priceBox/styles.css
142
151
  var styles_default = {};
143
152
 
144
153
  //#endregion
@@ -1751,6 +1760,27 @@ const IconCocktail = ({ className,...props }) => /* @__PURE__ */ jsx("svg", {
1751
1760
  })
1752
1761
  });
1753
1762
 
1763
+ //#endregion
1764
+ //#region src/icons/IconImage.tsx
1765
+ const IconImage = ({ className,...props }) => /* @__PURE__ */ jsxs("svg", {
1766
+ xmlns: "http://www.w3.org/2000/svg",
1767
+ className,
1768
+ width: "24",
1769
+ height: "24",
1770
+ viewBox: "0 0 24 24",
1771
+ fill: "none",
1772
+ ...props,
1773
+ children: [/* @__PURE__ */ jsx("path", {
1774
+ d: "M18 10C19.1046 10 20 9.10457 20 8C20 6.89543 19.1046 6 18 6C16.8954 6 16 6.89543 16 8C16 9.10457 16.8954 10 18 10Z",
1775
+ fill: "currentColor"
1776
+ }), /* @__PURE__ */ jsx("path", {
1777
+ "fill-rule": "evenodd",
1778
+ "clip-rule": "evenodd",
1779
+ d: "M3 3H21C22.6569 3 24 4.34315 24 6V18C24 19.6569 22.6569 21 21 21H3C1.34315 21 0 19.6569 0 18V6C0 4.34315 1.34314 3 3 3ZM3 5C2.44772 5 2 5.44772 2 6V14.1922L7.48523 8.70694C7.87585 8.31644 8.50891 8.31644 8.89954 8.70694L15.1924 14.9999L17.4852 12.7069C17.8759 12.3164 18.5089 12.3164 18.8995 12.7069L22 15.8075V6C22 5.44772 21.5523 5 21 5H3Z",
1780
+ fill: "currentColor"
1781
+ })]
1782
+ });
1783
+
1754
1784
  //#endregion
1755
1785
  //#region src/theme/variables.ts
1756
1786
  const CSS_VARIABLE_KEYS = [
@@ -4195,7 +4225,7 @@ const PriceCheck = ({ className, price, text, disabled = false, "data-testid": t
4195
4225
  children: text
4196
4226
  }),
4197
4227
  /* @__PURE__ */ jsxs("span", {
4198
- className: `price-check-price-padding${price && price > 999 ? "-large" : ""} text-start price-check-color-price price-check-fontFamily-price font-bold text-2xl whitespace-nowrap price-check-price-margin-top`,
4228
+ className: `price-check-price-padding${price && price > 999 ? "-large" : ""} text-start price-check-color-price price-check-fontFamily-price font-bold price-check-font-size-price whitespace-nowrap price-check-price-margin-top`,
4199
4229
  children: [
4200
4230
  price,
4201
4231
  ",",
@@ -5135,11 +5165,12 @@ const QuantityButtons = ({ className, value, setValue, minValue = 0, maxValue =
5135
5165
  //#endregion
5136
5166
  //#region src/components/slider/index.tsx
5137
5167
  const LAZY_LOAD_PLACEHOLDER_SRC = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D";
5138
- function Slider({ slides, options, plugins, lazyLoad = false, showArrows = true, showDots = true, dotsPlacement = "outside", overlay, overlayClassName, className, viewportClassName, containerClassName, slideClassName,...props }) {
5168
+ function Slider({ slides = [], options, plugins, lazyLoad = false, showArrows = true, showDots = true, roundedFull = false, showLike = true, dotsPlacement = "outside", overlay, overlayClassName, className, viewportClassName, containerClassName, slideClassName, square = true,...props }) {
5139
5169
  const [emblaRef, emblaApi] = useEmblaCarousel(options, plugins);
5140
5170
  const [selectedIndex, setSelectedIndex] = useState(0);
5141
5171
  const [scrollSnaps, setScrollSnaps] = useState([]);
5142
5172
  const [slidesInView, setSlidesInView] = useState([]);
5173
+ const [loadedImages, setLoadedImages] = useState(new Set());
5143
5174
  const canScrollPrev = useMemo(() => emblaApi?.canScrollPrev() ?? false, [emblaApi, selectedIndex]);
5144
5175
  const canScrollNext = useMemo(() => emblaApi?.canScrollNext() ?? false, [emblaApi, selectedIndex]);
5145
5176
  const scrollPrev = useCallback(() => {
@@ -5194,6 +5225,17 @@ function Slider({ slides, options, plugins, lazyLoad = false, showArrows = true,
5194
5225
  lazyLoad,
5195
5226
  updateSlidesInView
5196
5227
  ]);
5228
+ useEffect(() => {
5229
+ if (!emblaApi) return;
5230
+ const imageSlides = slides.filter((slide) => isValidElement(slide) && slide.type === "img");
5231
+ if (imageSlides.length > 0 && loadedImages.size === imageSlides.length) {
5232
+ emblaApi.reInit();
5233
+ }
5234
+ }, [
5235
+ emblaApi,
5236
+ loadedImages,
5237
+ slides
5238
+ ]);
5197
5239
  return /* @__PURE__ */ jsxs("div", {
5198
5240
  "data-component": "slider",
5199
5241
  className: cn("relative", className),
@@ -5203,9 +5245,9 @@ function Slider({ slides, options, plugins, lazyLoad = false, showArrows = true,
5203
5245
  ref: emblaRef,
5204
5246
  className: cn("overflow-hidden", viewportClassName),
5205
5247
  children: [/* @__PURE__ */ jsx("div", {
5206
- className: cn("flex touch-pan-y", containerClassName),
5248
+ className: cn("flex touch-pan-y items-start", containerClassName),
5207
5249
  children: slides.map((slide, index) => /* @__PURE__ */ jsx("div", {
5208
- className: cn("min-w-0 shrink-0 grow-0 basis-full", slideClassName),
5250
+ className: cn("min-w-0 shrink-0 grow-0 basis-full h-auto", square && "aspect-square", slideClassName),
5209
5251
  children: lazyLoad && isValidElement(slide) && slide.type === "img" ? (() => {
5210
5252
  const hasBeenInView = slidesInView.includes(index);
5211
5253
  const originalSrc = slide.props.src;
@@ -5213,16 +5255,20 @@ function Slider({ slides, options, plugins, lazyLoad = false, showArrows = true,
5213
5255
  return cloneElement(slide, {
5214
5256
  src,
5215
5257
  "data-src": originalSrc,
5216
- className: cn(slide.props.className, "h-auto")
5258
+ className: cn(slide.props.className, "h-auto"),
5259
+ onLoad: () => setLoadedImages((prev) => new Set(prev).add(index))
5217
5260
  });
5218
- })() : isValidElement(slide) ? cloneElement(slide, { className: cn(slide.props.className, "h-auto") }) : slide
5261
+ })() : isValidElement(slide) && slide.type === "img" ? cloneElement(slide, {
5262
+ className: cn(slide.props.className, "h-auto"),
5263
+ onLoad: () => setLoadedImages((prev) => new Set(prev).add(index))
5264
+ }) : isValidElement(slide) ? cloneElement(slide, { className: cn(slide.props.className, "h-auto") }) : slide
5219
5265
  }, index))
5220
5266
  }), showDots && dotsPlacement === "inside" && scrollSnaps.length > 1 && /* @__PURE__ */ jsx("div", {
5221
5267
  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",
5222
5268
  children: scrollSnaps.map((_, index) => /* @__PURE__ */ jsx("button", {
5223
5269
  type: "button",
5224
5270
  "aria-label": `Go to slide ${index + 1}`,
5225
- className: cn("pointer-events-auto cursor-pointer h-2 w-2 rounded-full bg-transparent border-2 border-white", index === selectedIndex && "bg-white"),
5271
+ className: cn("pointer-events-auto cursor-pointer h-2 w-2 bg-transparent rounded-full border-2 border-white", index === selectedIndex && "selectedIndexBg"),
5226
5272
  onClick: () => scrollTo(index)
5227
5273
  }, index))
5228
5274
  })]
@@ -5234,12 +5280,25 @@ function Slider({ slides, options, plugins, lazyLoad = false, showArrows = true,
5234
5280
  children: overlay
5235
5281
  })
5236
5282
  }),
5283
+ showLike && /* @__PURE__ */ jsx("div", {
5284
+ className: "pointer-events-none absolute top-4 right-4 z-20",
5285
+ children: /* @__PURE__ */ jsx("button", {
5286
+ type: "button",
5287
+ "aria-label": "Like",
5288
+ onClick: () => console.log("Like clicked"),
5289
+ className: cn("pointer-events-auto cursor-pointer inline-flex size-5 items-center justify-center"),
5290
+ children: /* @__PURE__ */ jsx("span", {
5291
+ "aria-hidden": "true",
5292
+ children: /* @__PURE__ */ jsx(IconHeart, { className: "size-6 text-white hover:text-red-500" })
5293
+ })
5294
+ })
5295
+ }),
5237
5296
  showArrows && /* @__PURE__ */ jsxs("div", {
5238
5297
  className: "pointer-events-none absolute inset-y-0 left-0 right-0 z-20 flex items-center justify-between",
5239
5298
  children: [/* @__PURE__ */ jsx("button", {
5240
5299
  type: "button",
5241
5300
  "aria-label": "Previous slide",
5242
- className: cn("pointer-events-auto cursor-pointer ml-2 inline-flex size-9 items-center justify-center rounded-full bg-black/40 text-white shadow", !canScrollPrev && "opacity-50"),
5301
+ className: cn("pointer-events-auto cursor-pointer ml-2 inline-flex size-9 items-center justify-center bg-primary-dark-50/50 text-white shadow", roundedFull === true ? "rounded-full" : "rounded-sm", !canScrollPrev && "opacity-50"),
5243
5302
  onClick: scrollPrev,
5244
5303
  disabled: !canScrollPrev,
5245
5304
  children: /* @__PURE__ */ jsx("span", {
@@ -5249,7 +5308,7 @@ function Slider({ slides, options, plugins, lazyLoad = false, showArrows = true,
5249
5308
  }), /* @__PURE__ */ jsx("button", {
5250
5309
  type: "button",
5251
5310
  "aria-label": "Next slide",
5252
- className: cn("pointer-events-auto cursor-pointer mr-2 inline-flex size-9 items-center justify-center rounded-full bg-black/40 text-white shadow", !canScrollNext && "opacity-50"),
5311
+ className: cn("pointer-events-auto cursor-pointer mr-2 inline-flex size-9 items-center justify-center bg-primary-dark-50/50 text-white shadow", roundedFull === true ? "rounded-full" : "rounded-sm", !canScrollNext && "opacity-50"),
5253
5312
  onClick: scrollNext,
5254
5313
  disabled: !canScrollNext,
5255
5314
  children: /* @__PURE__ */ jsx("span", {
@@ -6956,7 +7015,7 @@ const Chatbot = ({ className,...props }) => /* @__PURE__ */ jsx("div", {
6956
7015
 
6957
7016
  //#endregion
6958
7017
  //#region src/components/priceBox/index.tsx
6959
- const PriceBox = ({ className, hotel, brand, noBorder = false, noHover = false, hidePrice = false, onClick, "data-testid": dataTestId }) => {
7018
+ const PriceBox = ({ className, hotel, brand, noBorder = false, noHover = false, hidePrice = false, warnText, buttonText = "Bekijk vakantie", showButtonIcon, onClick, "data-testid": dataTestId }) => {
6960
7019
  return /* @__PURE__ */ jsxs("div", {
6961
7020
  "data-testid": dataTestId,
6962
7021
  "data-component": "price-box",
@@ -6970,6 +7029,10 @@ const PriceBox = ({ className, hotel, brand, noBorder = false, noHover = false,
6970
7029
  text: hotel.PriceInfo
6971
7030
  })
6972
7031
  }),
7032
+ warnText && /* @__PURE__ */ jsx("span", {
7033
+ className: "text-[9px] mb-2 order-4 md:order-2 priceBox-warnText",
7034
+ children: warnText
7035
+ }),
6973
7036
  /* @__PURE__ */ jsxs("div", {
6974
7037
  className: "text-sm flex flex-col gap-3 order-2",
6975
7038
  children: [
@@ -6983,7 +7046,11 @@ const PriceBox = ({ className, hotel, brand, noBorder = false, noHover = false,
6983
7046
  /* @__PURE__ */ jsx("span", { children: hotel.DepartureDate.split(",")[0] }),
6984
7047
  /* @__PURE__ */ jsxs("span", {
6985
7048
  className: "text-gray-400 ml-2",
6986
- children: [hotel.Duration, " dagen"]
7049
+ children: [
7050
+ "(",
7051
+ hotel.Duration,
7052
+ " dagen)"
7053
+ ]
6987
7054
  })
6988
7055
  ]
6989
7056
  }),
@@ -7013,10 +7080,11 @@ const PriceBox = ({ className, hotel, brand, noBorder = false, noHover = false,
7013
7080
  className: "w-4/12 md:w-full order-3",
7014
7081
  children: /* @__PURE__ */ jsx(Button, {
7015
7082
  variant: brand === "prijsvrij" ? "primaryGlow" : "secondary",
7016
- className: "whitespace-nowrap w-full md:w-auto",
7083
+ className: "whitespace-nowrap w-full",
7017
7084
  iconRight: true,
7018
- icon: /* @__PURE__ */ jsx(IconArrowRight, { className: "w-4 h-4" }),
7019
- children: "Bekijk vakantie"
7085
+ onClick,
7086
+ icon: showButtonIcon ? /* @__PURE__ */ jsx(IconArrowRight, { className: "w-4 h-4" }) : undefined,
7087
+ children: buttonText
7020
7088
  })
7021
7089
  })
7022
7090
  ]
@@ -8844,7 +8912,7 @@ const Loading = ({ className, plane = true, size = "small",...props }) => {
8844
8912
  let cloud3Height = 45;
8845
8913
  let cloud3Position = "bottom-32";
8846
8914
  if (size === "small") {
8847
- dollarSize = "size-[30px]";
8915
+ dollarSize = "size-[30px] p-1";
8848
8916
  planeSize = "w-16 h-16";
8849
8917
  cloud1Width = 60;
8850
8918
  cloud1Height = 27;
@@ -8856,7 +8924,7 @@ const Loading = ({ className, plane = true, size = "small",...props }) => {
8856
8924
  cloud3Height = 16;
8857
8925
  cloud3Position = "bottom-4";
8858
8926
  } else if (size === "medium") {
8859
- dollarSize = "size-[45px]";
8927
+ dollarSize = "size-[45px] p-2";
8860
8928
  planeSize = "w-24 h-24";
8861
8929
  cloud1Width = 140;
8862
8930
  cloud1Height = 63;
@@ -8868,7 +8936,7 @@ const Loading = ({ className, plane = true, size = "small",...props }) => {
8868
8936
  cloud3Height = 32;
8869
8937
  cloud3Position = "bottom-10";
8870
8938
  } else if (size === "large") {
8871
- dollarSize = "size-[75px]";
8939
+ dollarSize = "size-[75px] p-2";
8872
8940
  }
8873
8941
  const brand = useBrand();
8874
8942
  return /* @__PURE__ */ jsx("div", {
@@ -8899,7 +8967,7 @@ const Loading = ({ className, plane = true, size = "small",...props }) => {
8899
8967
  className: "relative overflow-hidden w-full h-full",
8900
8968
  children: /* @__PURE__ */ jsx("div", {
8901
8969
  className: `${brand === "prijsvrij" ? "bg-primary" : "bg-secondary"} rounded-full ${dollarSize} flex items-center justify-center`,
8902
- children: brand === "prijsvrij" ? /* @__PURE__ */ jsx(Dollar, { className: "animate-spin-slow w-full h-full p-2" }) : /* @__PURE__ */ jsx(DReizenSign, { className: " w-full h-full p-2 animate-spin-slow" })
8970
+ children: brand === "prijsvrij" ? /* @__PURE__ */ jsx(Dollar, { className: "animate-spin-slow w-full h-full" }) : /* @__PURE__ */ jsx(DReizenSign, { className: " w-full h-full animate-spin-slow" })
8903
8971
  })
8904
8972
  })
8905
8973
  });
@@ -8966,74 +9034,81 @@ const ReviewSmall = ({ className, rating, showArrow = true, "data-testid": dataT
8966
9034
 
8967
9035
  //#endregion
8968
9036
  //#region src/components/hero/index.tsx
8969
- const Hero = ({ className, sliderImages, topRightImage, bottomLeftImage, bottomRightImage, bottomRightOverlay, hotel, priceBoxPosition = "end",...props }) => /* @__PURE__ */ jsx("div", {
8970
- "data-component": "hero",
8971
- className: clsx(className, "bg-white p-1 rounded-lg hero-shadow"),
8972
- ...props,
8973
- children: /* @__PURE__ */ jsxs("div", {
8974
- className: "flex flex-col md:flex-row",
8975
- children: [/* @__PURE__ */ jsxs("div", {
8976
- 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"),
8977
- children: [
8978
- /* @__PURE__ */ jsxs("div", {
8979
- className: "md:col-span-2 md:row-span-2 overflow-hidden rounded-l-lg relative",
8980
- children: [/* @__PURE__ */ jsx(ReviewSmall, {
8981
- className: "absolute right-4 top-4 z-50",
8982
- rating: 9.3
8983
- }), /* @__PURE__ */ jsx(Slider, {
8984
- className: "h-full max-h-[340px] md:h-full rounded-l-lg",
8985
- slides: sliderImages.map((src, index) => /* @__PURE__ */ jsx("img", {
8986
- src,
8987
- alt: `Hero slide ${index + 1}`,
8988
- className: "h-full w-full object-cover rounded-l-lg"
8989
- }, index)),
8990
- showArrows: false,
8991
- dotsPlacement: "inside",
8992
- options: { loop: true },
8993
- lazyLoad: true
8994
- })]
8995
- }),
8996
- /* @__PURE__ */ jsx("div", {
8997
- className: "hidden md:flex col-span-1 row-span-1 overflow-hidden",
8998
- children: /* @__PURE__ */ jsx("img", {
8999
- src: topRightImage,
9000
- alt: "Hero image 1",
9001
- className: "h-full w-full object-cover"
9002
- })
9003
- }),
9004
- /* @__PURE__ */ jsxs("div", {
9005
- className: "hidden md:grid col-span-1 row-span-1 grid-cols-2 gap-1",
9006
- children: [/* @__PURE__ */ jsx("div", {
9007
- className: "overflow-hidden",
9037
+ const Hero = ({ className, sliderImages, topRightImage, bottomLeftImage, bottomRightImage, bottomRightOverlay, warnText, hotel, buttonText = "Bekijk vakantie", priceBoxPosition = "end",...props }) => {
9038
+ const brand = useBrand("prijsvrij");
9039
+ return /* @__PURE__ */ jsx("div", {
9040
+ "data-component": "hero",
9041
+ className: clsx(className, "bg-white p-1 rounded-sm hero-shadow"),
9042
+ ...props,
9043
+ children: /* @__PURE__ */ jsxs("div", {
9044
+ className: "flex flex-col md:flex-row",
9045
+ children: [/* @__PURE__ */ jsxs("div", {
9046
+ 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"),
9047
+ children: [
9048
+ /* @__PURE__ */ jsxs("div", {
9049
+ className: "md:col-span-2 md:row-span-2 overflow-hidden rounded-l-sm relative",
9050
+ children: [/* @__PURE__ */ jsx(ReviewSmall, {
9051
+ className: "absolute right-4 top-4 z-50",
9052
+ rating: 9.3
9053
+ }), /* @__PURE__ */ jsx(Slider, {
9054
+ className: "rounded-l-sm",
9055
+ slides: sliderImages.map((src, index) => /* @__PURE__ */ jsx("img", {
9056
+ src,
9057
+ alt: `Hero slide ${index + 1}`,
9058
+ className: "h-full w-full object-cover rounded-l-sm"
9059
+ }, index)),
9060
+ showArrows: false,
9061
+ dotsPlacement: "inside",
9062
+ showDots: false,
9063
+ options: { loop: true },
9064
+ plugins: [AutoHeight()],
9065
+ lazyLoad: true
9066
+ })]
9067
+ }),
9068
+ /* @__PURE__ */ jsx("div", {
9069
+ className: "hidden md:flex col-span-1 row-span-1 overflow-hidden",
9008
9070
  children: /* @__PURE__ */ jsx("img", {
9009
- src: bottomLeftImage,
9010
- alt: "Hero image 2",
9011
- className: "h-full w-full object-cover"
9071
+ src: topRightImage,
9072
+ alt: "Hero image 1",
9073
+ className: "h-full w-full object-cover rounded-tr-sm"
9012
9074
  })
9013
- }), /* @__PURE__ */ jsxs("div", {
9014
- className: "relative overflow-hidden ",
9015
- children: [/* @__PURE__ */ jsx("img", {
9016
- src: bottomRightImage,
9017
- alt: "Hero image 3",
9018
- className: "h-full w-full object-cover"
9019
- }), bottomRightOverlay && /* @__PURE__ */ jsx("div", {
9020
- className: "absolute inset-0",
9021
- children: bottomRightOverlay
9075
+ }),
9076
+ /* @__PURE__ */ jsxs("div", {
9077
+ className: "hidden md:grid col-span-1 row-span-1 grid-cols-2 gap-1",
9078
+ children: [/* @__PURE__ */ jsx("div", {
9079
+ className: "overflow-hidden",
9080
+ children: /* @__PURE__ */ jsx("img", {
9081
+ src: bottomLeftImage,
9082
+ alt: "Hero image 2",
9083
+ className: "h-full w-full object-cover"
9084
+ })
9085
+ }), /* @__PURE__ */ jsxs("div", {
9086
+ className: "relative overflow-hidden ",
9087
+ children: [/* @__PURE__ */ jsx("img", {
9088
+ src: bottomRightImage,
9089
+ alt: "Hero image 3",
9090
+ className: "h-full w-full object-cover"
9091
+ }), bottomRightOverlay && /* @__PURE__ */ jsx("div", {
9092
+ className: "absolute inset-0",
9093
+ children: bottomRightOverlay
9094
+ })]
9022
9095
  })]
9023
- })]
9096
+ })
9097
+ ]
9098
+ }), /* @__PURE__ */ jsx("div", {
9099
+ className: clsx(priceBoxPosition === "start" ? "order-1 md:order-1" : "order-2 md:order-2"),
9100
+ children: /* @__PURE__ */ jsx(PriceBox, {
9101
+ noHover: true,
9102
+ noBorder: true,
9103
+ hotel,
9104
+ brand,
9105
+ warnText: warnText || "",
9106
+ buttonText
9024
9107
  })
9025
- ]
9026
- }), /* @__PURE__ */ jsx("div", {
9027
- className: clsx(priceBoxPosition === "start" ? "order-1 md:order-1" : "order-2 md:order-2"),
9028
- children: /* @__PURE__ */ jsx(PriceBox, {
9029
- noHover: true,
9030
- noBorder: true,
9031
- hotel,
9032
- brand: "prijsvrij"
9033
- })
9034
- })]
9035
- })
9036
- });
9108
+ })]
9109
+ })
9110
+ });
9111
+ };
9037
9112
 
9038
9113
  //#endregion
9039
9114
  //#region src/components/review/index.tsx
@@ -10503,5 +10578,5 @@ const RangeSlider = forwardRef(function RangeSlider$1({ className, min = 0, max
10503
10578
  RangeSlider.displayName = "RangeSlider";
10504
10579
 
10505
10580
  //#endregion
10506
- export { Accordion, BlogWidget, BrandProvider, BrandTopMenu, Button, CSS_VARIABLE_KEYS, Calendar, CategoryFilter, Chatbot, Checkbox, Collection, CounterIcon, Coupon, Divider, Dropdown, FilterButton, Filters, FlightSwitch, Footer, GiftCard, 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, Label, LinkBox, Loading, Logo, Map, MatrixTable, Menu, MiddleNavigation, Nominations, NumberField, PageNavigation, PageRating, PhoneNumberInput, PhotoCardsRotated, PriceBox, PriceCheck, ProfileMenu, ProgressBar, PvPopup, QuantityButtons, RadioButton, RangeSlider, Rating, RegionSelector, ResultPageFilterBox, Review, ReviewSmall, Reviews, ScrollToTop, SearchBlock, SearchBox, SearchBoxResults, SearchInput, Skeleton, Slider, Spotlights, Stepper, StickyFooter, StickyMobileButtonWrapper, Table, TableCell, TableHeader, TableHeaderItem, TableHeaderRow, TableRow, TextInput, Textarea, TimeInput, Toggle, TopHeaderMenu, TopMenu, TransportToggle, TruncatedText, UnorderedList, UnorderedListItem, Usp, ViewedAccomodations, WarningText, Weather, buttonVariants, getCSSVariable, setCSSVariable, useBrand, withPvUi };
10581
+ export { Accordion, BlogWidget, BrandProvider, BrandTopMenu, Button, CSS_VARIABLE_KEYS, Calendar, CategoryFilter, Chatbot, Checkbox, Collection, CounterIcon, Coupon, Divider, Dropdown, FilterButton, Filters, FlightSwitch, Footer, GiftCard, 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, IconImage, 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, Label, LinkBox, Loading, Logo, Map, MatrixTable, Menu, MiddleNavigation, Nominations, NumberField, PageNavigation, PageRating, PhoneNumberInput, PhotoCardsRotated, PriceBox, PriceCheck, ProfileMenu, ProgressBar, PvPopup, QuantityButtons, RadioButton, RangeSlider, Rating, RegionSelector, ResultPageFilterBox, Review, ReviewSmall, Reviews, ScrollToTop, SearchBlock, SearchBox, SearchBoxResults, SearchInput, Skeleton, Slider, Spotlights, Stepper, StickyFooter, StickyMobileButtonWrapper, Table, TableCell, TableHeader, TableHeaderItem, TableHeaderRow, TableRow, TextInput, Textarea, TimeInput, Toggle, TopHeaderMenu, TopMenu, TransportToggle, TruncatedText, UnorderedList, UnorderedListItem, Usp, ViewedAccomodations, WarningText, Weather, buttonVariants, getCSSVariable, setCSSVariable, useBrand, withPvUi };
10507
10582
  //# sourceMappingURL=index.js.map