@hotelcard/ui 0.0.15 → 0.0.17

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -24,31 +34,47 @@ __export(index_exports, {
   Benefits: () => Benefits,
   Block: () => Block,
   Button: () => Button,
+  CATEGORY_OPTIONS: () => CATEGORY_OPTIONS,
   Card: () => Card,
   Checkbox: () => Checkbox,
+  CheckboxFilter: () => CheckboxFilter,
   ChevronLeftIcon: () => ChevronLeftIcon,
   ChevronRightIcon: () => ChevronRightIcon2,
   Chip: () => Chip,
+  CollapsibleFilterSection: () => CollapsibleFilterSection,
   DateSelector: () => DateSelector,
   Divider: () => Divider,
   Dropdown: () => Dropdown,
   DualCalendar: () => DualCalendar,
+  ExperienceFilter: () => ExperienceFilter,
   FAQ: () => FAQ,
+  FilterCheckboxItem: () => FilterCheckboxItem,
+  FilterModal: () => FilterModal,
+  FilterPanel: () => FilterPanel,
   GuestContent: () => GuestContent,
   HeartIcon: () => HeartIcon3,
   HotelCard: () => HotelCard,
   HotelCardContent: () => HotelCardContent,
   HotelCardImage: () => HotelCardImage,
   HotelCardUIProvider: () => HotelCardUIProvider,
+  HotelCategoryFilter: () => HotelCategoryFilter,
   Input: () => Input,
+  MealsFilter: () => MealsFilter,
   Modal: () => Modal,
   Pin: () => Pin,
   PinIcon: () => PinIcon2,
+  PriceRangeFilter: () => PriceRangeFilter,
+  REVIEW_OPTIONS: () => REVIEW_OPTIONS,
   RadioButton: () => RadioButton,
   Rating: () => Rating,
+  RegionsFilter: () => RegionsFilter,
   ReviewCard: () => ReviewCard,
+  ReviewsFilter: () => ReviewsFilter,
   SectionHeader: () => SectionHeader,
+  SelectedFiltersRow: () => SelectedFiltersRow,
   StarIcon: () => StarIcon4,
+  TransportFilter: () => TransportFilter,
+  WellnessFilter: () => WellnessFilter,
   WhenContent: () => WhenContent,
   calculateDiscount: () => calculateDiscount,
   formatDate: () => formatDate,
@@ -2973,9 +2999,1333 @@ var HotelCard = ({
   ] });
 };
 
-// src/components/icons/HeartIcon.tsx
+// src/components/Filters/FilterCheckboxItem.module.css
+var FilterCheckboxItem_default = {};
+
+// src/components/Filters/FilterCheckboxItem.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var HeartIcon3 = ({ filled = false, className = "", size = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+var FilterCheckboxItem = ({
+  id,
+  label,
+  count,
+  checked,
+  disabled = false,
+  onChange,
+  className = "",
+  trackName
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    "label",
+    {
+      className: `${FilterCheckboxItem_default.filterRow} ${disabled ? FilterCheckboxItem_default.filterRowDisabled : ""} ${className}`,
+      tabIndex: disabled ? -1 : 0,
+      "data-track": trackName,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: FilterCheckboxItem_default.checkboxLabel, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: FilterCheckboxItem_default.checkboxButton, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              "input",
+              {
+                id,
+                type: "checkbox",
+                className: FilterCheckboxItem_default.checkbox,
+                checked,
+                disabled,
+                onChange
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: `${FilterCheckboxItem_default.checkboxBox} ${disabled ? FilterCheckboxItem_default.checkboxBoxDisabled : ""}`, children: checked && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("svg", { viewBox: "0 0 12 10", fill: "none", className: FilterCheckboxItem_default.checkIcon, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              "path",
+              {
+                d: "M1 5L4.5 8.5L11 1",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ) }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: `${FilterCheckboxItem_default.filterLabel} ${disabled ? FilterCheckboxItem_default.filterLabelDisabled : ""}`, children: label })
+        ] }),
+        count !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: `${FilterCheckboxItem_default.filterCount} ${disabled ? FilterCheckboxItem_default.filterCountDisabled : ""}`, children: count })
+      ]
+    }
+  );
+};
+
+// src/components/Filters/CollapsibleFilterSection.tsx
+var import_react15 = __toESM(require("react"), 1);
+
+// src/components/Filters/CollapsibleFilterSection.module.css
+var CollapsibleFilterSection_default = {};
+
+// src/components/Filters/CollapsibleFilterSection.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var CollapsibleFilterSection = ({
+  title,
+  children,
+  defaultExpanded = true,
+  showAllText,
+  showLessText,
+  hasShowAll = false,
+  initialItemsToShow = 5,
+  className = ""
+}) => {
+  const { t } = useUIContext();
+  const [isExpanded, setIsExpanded] = (0, import_react15.useState)(defaultExpanded);
+  const [showAll, setShowAll] = (0, import_react15.useState)(false);
+  const resolvedShowAllText = showAllText ?? t("filter.show-all", "Show all");
+  const resolvedShowLessText = showLessText ?? t("filter.show-less", "Show less");
+  (0, import_react15.useEffect)(() => {
+    if (defaultExpanded && !isExpanded) {
+      setIsExpanded(true);
+    }
+  }, [defaultExpanded]);
+  const toggleExpanded = () => {
+    setIsExpanded(!isExpanded);
+  };
+  const toggleShowAll = () => {
+    setShowAll(!showAll);
+  };
+  const childrenArray = import_react15.default.Children.toArray(children);
+  const shouldShowToggle = hasShowAll && childrenArray.length > initialItemsToShow;
+  const displayedChildren = shouldShowToggle && !showAll ? childrenArray.slice(0, initialItemsToShow) : childrenArray;
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: `${CollapsibleFilterSection_default.section} ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: CollapsibleFilterSection_default.header,
+        onClick: toggleExpanded,
+        "aria-expanded": isExpanded,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: CollapsibleFilterSection_default.title, children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            "svg",
+            {
+              className: `${CollapsibleFilterSection_default.chevron} ${isExpanded ? CollapsibleFilterSection_default.chevronExpanded : ""}`,
+              viewBox: "0 0 24 24",
+              fill: "none",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                "path",
+                {
+                  d: "M6 9L12 15L18 9",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      "div",
+      {
+        className: `${CollapsibleFilterSection_default.content} ${isExpanded ? CollapsibleFilterSection_default.contentExpanded : ""}`,
+        "aria-hidden": !isExpanded,
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: CollapsibleFilterSection_default.contentInner, children: [
+          displayedChildren,
+          shouldShowToggle && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+            "button",
+            {
+              type: "button",
+              className: CollapsibleFilterSection_default.showAllButton,
+              onClick: toggleShowAll,
+              children: [
+                showAll ? resolvedShowLessText : resolvedShowAllText,
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  "svg",
+                  {
+                    className: `${CollapsibleFilterSection_default.showAllChevron} ${showAll ? CollapsibleFilterSection_default.showAllChevronUp : ""}`,
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                      "path",
+                      {
+                        d: "M6 9L12 15L18 9",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+};
+
+// src/components/Filters/PriceRangeFilter.tsx
+var import_react16 = require("react");
+
+// src/components/Filters/PriceRangeFilter.module.css
+var PriceRangeFilter_default = {};
+
+// src/components/Filters/PriceRangeFilter.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var DEFAULT_HISTOGRAM = [
+  12,
+  25,
+  38,
+  45,
+  52,
+  48,
+  42,
+  35,
+  28,
+  22,
+  18,
+  15,
+  12,
+  10,
+  8,
+  6,
+  5,
+  4,
+  3,
+  2
+];
+var PriceRangeFilter = ({
+  minPrice,
+  maxPrice,
+  value,
+  onChange,
+  onApply,
+  histogram = DEFAULT_HISTOGRAM,
+  currency,
+  onDragStart,
+  onDragEnd,
+  debounceDelay = 500
+}) => {
+  const { t, currency: contextCurrency } = useUIContext();
+  const displayCurrency = currency ?? contextCurrency;
+  const sliderRef = (0, import_react16.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react16.useState)(null);
+  const [isDraggingExternal, setIsDraggingExternal] = (0, import_react16.useState)(false);
+  const lastValueRef = (0, import_react16.useRef)(value);
+  const timeoutRef = (0, import_react16.useRef)(null);
+  const [minInputValue, setMinInputValue] = (0, import_react16.useState)("");
+  const [maxInputValue, setMaxInputValue] = (0, import_react16.useState)("");
+  const [minInputFocused, setMinInputFocused] = (0, import_react16.useState)(false);
+  const [maxInputFocused, setMaxInputFocused] = (0, import_react16.useState)(false);
+  const range = maxPrice - minPrice;
+  const minPercent = range > 0 ? (value.min - minPrice) / range * 100 : 0;
+  const maxPercent = range > 0 ? (value.max - minPrice) / range * 100 : 100;
+  const maxHistogramValue = Math.max(...histogram, 1);
+  const getBarActive = (0, import_react16.useCallback)((index) => {
+    const barStartPercent = index / histogram.length * 100;
+    const barEndPercent = (index + 1) / histogram.length * 100;
+    return barStartPercent < maxPercent && barEndPercent > minPercent;
+  }, [histogram.length, minPercent, maxPercent]);
+  const trackInset = 12;
+  const triggerOnApply = (0, import_react16.useCallback)((newValue) => {
+    if (!onApply) return;
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      onApply(newValue);
+    }, debounceDelay);
+  }, [onApply, debounceDelay]);
+  const handleDrag = (0, import_react16.useCallback)((clientX) => {
+    if (!sliderRef.current || !isDragging) return;
+    const rect = sliderRef.current.getBoundingClientRect();
+    const trackWidth = rect.width - trackInset * 2;
+    const trackLeft = rect.left + trackInset;
+    const percent = Math.max(0, Math.min(100, (clientX - trackLeft) / trackWidth * 100));
+    const newValue = Math.round(minPrice + percent / 100 * range);
+    let newMin = value.min;
+    let newMax = value.max;
+    if (isDragging === "min") {
+      const clampedValue = Math.min(newValue, value.max - 1);
+      newMin = Math.max(minPrice, clampedValue);
+    } else {
+      const clampedValue = Math.max(newValue, value.min + 1);
+      newMax = Math.min(maxPrice, clampedValue);
+    }
+    const newRange = { min: newMin, max: newMax };
+    onChange(newRange);
+    lastValueRef.current = newRange;
+    if (!isDraggingExternal) {
+      triggerOnApply(newRange);
+    }
+  }, [isDragging, minPrice, maxPrice, range, value, onChange, isDraggingExternal, triggerOnApply]);
+  const handleMouseDown = (handle) => (e) => {
+    e.preventDefault();
+    setIsDragging(handle);
+    setIsDraggingExternal(true);
+    onDragStart?.();
+  };
+  const handleTouchStart = (handle) => (e) => {
+    e.preventDefault();
+    setIsDragging(handle);
+    setIsDraggingExternal(true);
+    onDragStart?.();
+  };
+  const handleDragEnd = (0, import_react16.useCallback)(() => {
+    if (isDraggingExternal && onApply) {
+      onApply(lastValueRef.current);
+    }
+    setIsDragging(null);
+    setIsDraggingExternal(false);
+    onDragEnd?.();
+  }, [isDraggingExternal, onApply, onDragEnd]);
+  (0, import_react16.useEffect)(() => {
+    if (!isDragging) return;
+    const handleMouseMove = (e) => {
+      handleDrag(e.clientX);
+    };
+    const handleTouchMove = (e) => {
+      if (e.touches.length > 0) {
+        handleDrag(e.touches[0].clientX);
+      }
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleDragEnd);
+    document.addEventListener("touchmove", handleTouchMove, { passive: false });
+    document.addEventListener("touchend", handleDragEnd);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleDragEnd);
+      document.removeEventListener("touchmove", handleTouchMove);
+      document.removeEventListener("touchend", handleDragEnd);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [isDragging, handleDrag, handleDragEnd]);
+  const handleMinInputFocus = () => {
+    setMinInputFocused(true);
+    setMinInputValue(value.min.toString());
+  };
+  const handleMaxInputFocus = () => {
+    setMaxInputFocused(true);
+    setMaxInputValue(value.max.toString());
+  };
+  const handleMinInputChange = (e) => {
+    const val = e.target.value.replace(/[^0-9]/g, "");
+    setMinInputValue(val);
+  };
+  const handleMaxInputChange = (e) => {
+    const val = e.target.value.replace(/[^0-9]/g, "");
+    setMaxInputValue(val);
+  };
+  const handleMinInputBlur = () => {
+    setMinInputFocused(false);
+    const numValue = parseInt(minInputValue, 10);
+    if (!isNaN(numValue)) {
+      const clampedValue = Math.max(minPrice, Math.min(numValue, value.max - 1));
+      const newRange = { min: clampedValue, max: value.max };
+      onChange(newRange);
+      if (onApply) {
+        triggerOnApply(newRange);
+      }
+    }
+  };
+  const handleMaxInputBlur = () => {
+    setMaxInputFocused(false);
+    const numValue = parseInt(maxInputValue, 10);
+    if (!isNaN(numValue)) {
+      const clampedValue = Math.min(maxPrice, Math.max(numValue, value.min + 1));
+      const newRange = { min: value.min, max: clampedValue };
+      onChange(newRange);
+      if (onApply) {
+        triggerOnApply(newRange);
+      }
+    }
+  };
+  (0, import_react16.useEffect)(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: PriceRangeFilter_default.priceRangeWrapper, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: PriceRangeFilter_default.priceInputs, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: PriceRangeFilter_default.priceInputWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "input",
+        {
+          type: "text",
+          inputMode: "numeric",
+          className: PriceRangeFilter_default.priceInput,
+          value: minInputFocused ? minInputValue : `${displayCurrency} ${value.min}`,
+          onChange: handleMinInputChange,
+          onFocus: handleMinInputFocus,
+          onBlur: handleMinInputBlur,
+          "aria-label": t("filter.min-price", "Minimum price")
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: PriceRangeFilter_default.priceInputDivider, children: "\u2014" }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: PriceRangeFilter_default.priceInputWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "input",
+        {
+          type: "text",
+          inputMode: "numeric",
+          className: PriceRangeFilter_default.priceInput,
+          value: maxInputFocused ? maxInputValue : `${displayCurrency} ${value.max}`,
+          onChange: handleMaxInputChange,
+          onFocus: handleMaxInputFocus,
+          onBlur: handleMaxInputBlur,
+          "aria-label": t("filter.max-price", "Maximum price")
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: PriceRangeFilter_default.histogram, children: histogram.map((histValue, index) => {
+      const height = histValue / maxHistogramValue * 100;
+      const isActive = getBarActive(index);
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "div",
+        {
+          className: `${PriceRangeFilter_default.histogramBar} ${isActive ? PriceRangeFilter_default.histogramBarActive : ""}`,
+          style: { height: `${Math.max(height, 10)}%` }
+        },
+        index
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: PriceRangeFilter_default.sliderContainer, ref: sliderRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: PriceRangeFilter_default.sliderTrack }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "div",
+        {
+          className: PriceRangeFilter_default.sliderActiveTrack,
+          style: {
+            left: `calc(12px + (100% - 24px) * ${minPercent / 100})`,
+            width: `calc((100% - 24px) * ${(maxPercent - minPercent) / 100})`
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "div",
+        {
+          className: `${PriceRangeFilter_default.sliderHandle} ${isDragging === "min" ? PriceRangeFilter_default.sliderHandleActive : ""}`,
+          style: { left: `calc(12px + (100% - 24px) * ${minPercent / 100})` },
+          onMouseDown: handleMouseDown("min"),
+          onTouchStart: handleTouchStart("min"),
+          role: "slider",
+          "aria-label": t("filter.min-price", "Minimum price"),
+          "aria-valuenow": value.min,
+          "aria-valuemin": minPrice,
+          "aria-valuemax": value.max,
+          tabIndex: 0
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "div",
+        {
+          className: `${PriceRangeFilter_default.sliderHandle} ${isDragging === "max" ? PriceRangeFilter_default.sliderHandleActive : ""}`,
+          style: { left: `calc(12px + (100% - 24px) * ${maxPercent / 100})` },
+          onMouseDown: handleMouseDown("max"),
+          onTouchStart: handleTouchStart("max"),
+          role: "slider",
+          "aria-label": t("filter.max-price", "Maximum price"),
+          "aria-valuenow": value.max,
+          "aria-valuemin": value.min,
+          "aria-valuemax": maxPrice,
+          tabIndex: 0
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/Filters/HotelCategoryFilter.module.css
+var HotelCategoryFilter_default = {};
+
+// src/components/Filters/HotelCategoryFilter.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var CATEGORY_OPTIONS = [
+  { value: "5", stars: 5, label: null },
+  { value: "4", stars: 4, label: null },
+  { value: "3", stars: 3, label: null },
+  { value: "2", stars: 2, label: null },
+  { value: "swiss_lodge", stars: 0, label: "Swiss Lodge" },
+  { value: "not_classified", stars: 0, label: "No category" }
+];
+var HotelCategoryFilter = ({
+  selected,
+  counts = {},
+  onChange,
+  className = ""
+}) => {
+  const { t } = useUIContext();
+  const handleToggle = (value) => {
+    if (selected.includes(value)) {
+      onChange(selected.filter((v) => v !== value));
+    } else {
+      onChange([...selected, value]);
+    }
+  };
+  const getLabel = (option) => {
+    if (option.stars > 0) return null;
+    if (option.value === "swiss_lodge") return t("filter.swiss-lodge", "Swiss Lodge");
+    if (option.value === "not_classified") return t("filter.no-category", "No category");
+    return option.label;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: HotelCategoryFilter_default.filterList, children: CATEGORY_OPTIONS.map((option) => {
+      const count = counts[option.value];
+      const isDisabled = count === 0 && !selected.includes(option.value);
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        FilterCheckboxItem,
+        {
+          id: `category-${option.value}`,
+          label: option.stars > 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: HotelCategoryFilter_default.starsContainer, children: Array.from({ length: option.stars }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { className: HotelCategoryFilter_default.starIcon, viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { d: "M12 0L14.6942 8.2918H23.4127L16.3593 13.4164L19.0534 21.7082L12 16.5836L4.94658 21.7082L7.64074 13.4164L0.587322 8.2918H9.30583L12 0Z" }) }, i)) }) : getLabel(option),
+          count,
+          checked: selected.includes(option.value),
+          disabled: isDisabled,
+          onChange: () => handleToggle(option.value),
+          trackName: `filter-category-${option.value}`
+        },
+        option.value
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: HotelCategoryFilter_default.footer, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: HotelCategoryFilter_default.footerText, children: t("filter.hotellerie-suisse", "Classification HotellerieSuisse") }) })
+  ] });
+};
+
+// src/components/Filters/ReviewsFilter.module.css
+var ReviewsFilter_default = {};
+
+// src/components/Filters/ReviewsFilter.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var REVIEW_OPTIONS = [
+  { value: "excellent", labelKey: "rating-excellent", range: "(4.4+)" },
+  { value: "very_good", labelKey: "rating-very-good", range: "(4.1 \u2013 4.3)" },
+  { value: "good", labelKey: "rating-good", range: "(3.8 \u2013 4.0)" },
+  { value: "fair", labelKey: "rating-fair", range: "(3.5 \u2013 3.7)" },
+  { value: "no_rating", labelKey: "rating-none", range: "" }
+];
+var ReviewsFilter = ({
+  selected,
+  counts = {},
+  onChange,
+  className = "",
+  isPlaceSearchActive = false
+}) => {
+  const { t } = useUIContext();
+  const handleToggle = (value) => {
+    if (selected.includes(value)) {
+      onChange(selected.filter((v) => v !== value));
+    } else {
+      onChange([...selected, value]);
+    }
+  };
+  const getRatingLabel = (labelKey) => {
+    const labelMap = {
+      "rating-excellent": t("label.rating-excellent", "Excellent"),
+      "rating-very-good": t("label.rating-very-good", "Very Good"),
+      "rating-good": t("label.rating-good", "Good"),
+      "rating-fair": t("label.rating-fair", "Fair"),
+      "rating-none": t("label.rating-none", "No rating")
+    };
+    return labelMap[labelKey] ?? labelKey;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: ReviewsFilter_default.filterList, children: REVIEW_OPTIONS.map((option) => {
+      const count = counts[option.value];
+      const isDisabled = !isPlaceSearchActive && count === 0 && !selected.includes(option.value);
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        FilterCheckboxItem,
+        {
+          id: `review-${option.value}`,
+          label: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+            getRatingLabel(option.labelKey),
+            option.range && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: ReviewsFilter_default.filterRange, children: [
+              " ",
+              option.range
+            ] })
+          ] }),
+          count,
+          checked: selected.includes(option.value),
+          disabled: isDisabled,
+          onChange: () => handleToggle(option.value),
+          trackName: `filter-review-${option.value}`
+        },
+        option.value
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: ReviewsFilter_default.footer, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: ReviewsFilter_default.footerText, children: t("filter.trustyou", "Reviews from TrustYou\xAE") }) })
+  ] });
+};
+
+// src/components/Filters/ExperienceFilter.tsx
+var import_react17 = require("react");
+
+// src/components/Filters/ExperienceFilter.module.css
+var ExperienceFilter_default = {};
+
+// src/components/Filters/ExperienceFilter.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var ExperienceFilter = ({
+  selected,
+  themes = [],
+  onChange,
+  className = ""
+}) => {
+  const { t } = useUIContext();
+  const [expanded, setExpanded] = (0, import_react17.useState)(false);
+  const visibleThemes = expanded ? themes : themes.slice(0, 5);
+  const hasMoreThemes = themes.length > 5;
+  const handleToggle = (value) => {
+    if (selected.includes(value)) {
+      onChange(selected.filter((v) => v !== value));
+    } else {
+      onChange([...selected, value]);
+    }
+  };
+  if (themes.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: `${ExperienceFilter_default.filterList} ${className}`, children: [
+    visibleThemes.map((theme) => {
+      const themeIdStr = String(theme.id);
+      const isDisabled = theme.count === 0 && !selected.includes(themeIdStr);
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        FilterCheckboxItem,
+        {
+          id: `experience-${theme.id}`,
+          label: theme.name,
+          count: theme.count > 0 ? theme.count : void 0,
+          checked: selected.includes(themeIdStr),
+          disabled: isDisabled,
+          onChange: () => handleToggle(themeIdStr),
+          trackName: `filter-experience-${theme.id}`
+        },
+        theme.id
+      );
+    }),
+    hasMoreThemes && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: ExperienceFilter_default.showMoreBtn,
+        onClick: () => setExpanded(!expanded),
+        children: [
+          expanded ? t("filter.show-less", "Show less") : t("filter.show-all", "Show all"),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: `${ExperienceFilter_default.arrowIcon} ${expanded ? ExperienceFilter_default.arrowUp : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { d: "M9.36927 13.9061C9.71908 14.2535 10.2847 14.2535 10.6308 13.9061L16.4069 8.1803C16.7567 7.83285 16.7567 7.27102 16.4069 6.92727C16.0571 6.58352 15.4915 6.57983 15.1454 6.92727L10.0019 12.0247L4.85845 6.92727C4.50864 6.57983 3.94299 6.57983 3.5969 6.92727C3.25081 7.27472 3.24709 7.83655 3.5969 8.1803L9.37299 13.9061H9.36927Z", fill: "currentColor" }) }) })
+        ]
+      }
+    )
+  ] });
+};
+
+// src/components/Filters/RegionsFilter.tsx
+var import_react18 = require("react");
+
+// src/components/Filters/RegionsFilter.module.css
+var RegionsFilter_default = {};
+
+// src/components/Filters/RegionsFilter.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var RegionsFilter = ({
+  regions,
+  selected,
+  onChange,
+  className = "",
+  isPlaceSearchActive = false
+}) => {
+  const { t } = useUIContext();
+  const [expandedCountries, setExpandedCountries] = (0, import_react18.useState)(/* @__PURE__ */ new Set(["country_215"]));
+  const hasInitializedRef = (0, import_react18.useRef)(false);
+  (0, import_react18.useEffect)(() => {
+    if (hasInitializedRef.current) return;
+    if (regions.length === 0 || selected.length === 0) return;
+    const countriesWithSelectedRegions = /* @__PURE__ */ new Set();
+    regions.forEach((region) => {
+      if (region.subRegions?.some((sub) => selected.includes(sub.value))) {
+        countriesWithSelectedRegions.add(region.value);
+      }
+    });
+    if (countriesWithSelectedRegions.size > 0) {
+      setExpandedCountries(countriesWithSelectedRegions);
+      hasInitializedRef.current = true;
+    }
+  }, [regions, selected]);
+  const handleCountryToggle = (countryValue) => {
+    setExpandedCountries((prev) => {
+      const next = new Set(prev);
+      if (next.has(countryValue)) {
+        next.delete(countryValue);
+      } else {
+        next.add(countryValue);
+      }
+      return next;
+    });
+  };
+  const handleRegionToggle = (regionValue) => {
+    if (selected.includes(regionValue)) {
+      onChange(selected.filter((r) => r !== regionValue));
+    } else {
+      onChange([...selected, regionValue]);
+    }
+  };
+  if (regions.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: `${RegionsFilter_default.filterList} ${className}`, children: regions.map((region) => {
+    const hasSubRegions = region.subRegions && region.subRegions.length > 0;
+    const isExpanded = expandedCountries.has(region.value);
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: RegionsFilter_default.regionItem, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: `${RegionsFilter_default.countryRow} ${isExpanded ? RegionsFilter_default.countryRowExpanded : ""}`,
+          onClick: () => handleCountryToggle(region.value),
+          "aria-expanded": isExpanded,
+          disabled: isPlaceSearchActive,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: RegionsFilter_default.countryInfo, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: RegionsFilter_default.countryName, children: region.label }),
+              region.count !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: RegionsFilter_default.countBadge, children: region.count })
+            ] }),
+            hasSubRegions && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "20",
+                height: "20",
+                viewBox: "0 0 20 20",
+                fill: "none",
+                className: `${RegionsFilter_default.chevron} ${isExpanded ? RegionsFilter_default.chevronExpanded : ""}`,
+                children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: "M9.36927 13.9061C9.71908 14.2535 10.2847 14.2535 10.6308 13.9061L16.4069 8.18027C16.7567 7.83283 16.7567 7.271 16.4069 6.92725C16.0571 6.5835 15.4915 6.5798 15.1454 6.92725L10.0019 12.0247L4.85845 6.92725C4.50864 6.5798 3.94299 6.5798 3.5969 6.92725C3.25081 7.2747 3.24709 7.83652 3.5969 8.18027L9.37299 13.9061H9.36927Z", fill: "#6B7280" })
+              }
+            )
+          ]
+        }
+      ),
+      hasSubRegions && isExpanded && (() => {
+        const hasSelectableRegions = region.subRegions.some(
+          (sr) => sr.count === void 0 || sr.count > 0
+        );
+        const subValues = region.subRegions.map((sr) => sr.value);
+        const hasSelectedRegions = subValues.some((v) => selected.includes(v));
+        return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: RegionsFilter_default.mobileSelectAllActions, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "button",
+            {
+              type: "button",
+              className: RegionsFilter_default.selectAllBtn,
+              disabled: !hasSelectableRegions,
+              onClick: () => {
+                const selectableSubValues = region.subRegions.filter((sr) => sr.count === void 0 || sr.count > 0).map((sr) => sr.value);
+                const merged = Array.from(/* @__PURE__ */ new Set([...selected, ...selectableSubValues]));
+                onChange(merged);
+              },
+              children: t("filter.select-all", "Select all")
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "button",
+            {
+              type: "button",
+              className: RegionsFilter_default.resetAllBtn,
+              disabled: !hasSelectedRegions,
+              onClick: () => {
+                onChange(selected.filter((v) => !subValues.includes(v)));
+              },
+              children: t("filter.reset", "Reset")
+            }
+          )
+        ] });
+      })(),
+      hasSubRegions && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: RegionsFilter_default.subRegions, children: region.subRegions.map((subRegion) => {
+        const isDisabled = subRegion.count === 0 && !selected.includes(subRegion.value) || isPlaceSearchActive && !selected.includes(subRegion.value);
+        return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          FilterCheckboxItem,
+          {
+            id: `region-${subRegion.value}`,
+            label: subRegion.label,
+            count: subRegion.count,
+            checked: selected.includes(subRegion.value),
+            disabled: isDisabled,
+            onChange: () => handleRegionToggle(subRegion.value),
+            trackName: `filter-region-${subRegion.value}`
+          },
+          subRegion.value
+        );
+      }) })
+    ] }, region.value);
+  }) });
+};
+
+// src/components/Filters/CheckboxFilter.module.css
+var CheckboxFilter_default = {};
+
+// src/components/Filters/CheckboxFilter.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var CheckboxFilter = ({
+  selected,
+  counts = {},
+  options = [],
+  onChange,
+  className = "",
+  trackPrefix = "filter"
+}) => {
+  const handleToggle = (value) => {
+    if (selected.includes(value)) {
+      onChange(selected.filter((v) => v !== value));
+    } else {
+      onChange([...selected, value]);
+    }
+  };
+  if (options.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: `${CheckboxFilter_default.filterList} ${className}`, children: options.map((option) => {
+    const count = counts[option.key];
+    const isDisabled = count === 0 && !selected.includes(option.key);
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      FilterCheckboxItem,
+      {
+        id: `${trackPrefix}-${option.key}`,
+        label: option.name,
+        count,
+        checked: selected.includes(option.key),
+        disabled: isDisabled,
+        onChange: () => handleToggle(option.key),
+        trackName: `filter-${trackPrefix}-${option.key}`
+      },
+      option.key
+    );
+  }) });
+};
+var MealsFilter = (props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CheckboxFilter, { ...props, trackPrefix: "meals" });
+var TransportFilter = (props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CheckboxFilter, { ...props, trackPrefix: "transport" });
+var WellnessFilter = (props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CheckboxFilter, { ...props, trackPrefix: "wellness" });
+
+// src/components/Filters/SelectedFiltersRow.module.css
+var SelectedFiltersRow_default = {};
+
+// src/components/Filters/SelectedFiltersRow.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var SelectedFiltersRow = ({
+  filters,
+  onRemove,
+  onClearAll,
+  className = ""
+}) => {
+  const { t } = useUIContext();
+  if (filters.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `${SelectedFiltersRow_default.container} ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: SelectedFiltersRow_default.chipsWrapper, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("p", { className: SelectedFiltersRow_default.selectedText, children: [
+      t("filter.selected", "Selected:"),
+      " "
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: SelectedFiltersRow_default.chips, children: [
+      filters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        Chip,
+        {
+          label: filter.label,
+          size: "small",
+          state: "idle",
+          removable: true,
+          onRemove: () => onRemove(filter)
+        },
+        filter.id
+      )),
+      onClearAll && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        Button,
+        {
+          variant: "link",
+          className: SelectedFiltersRow_default.clearAllBtn,
+          onClick: onClearAll,
+          children: t("filter.clear-all", "Clear all")
+        }
+      )
+    ] })
+  ] }) });
+};
+
+// src/components/Filters/FilterPanel.tsx
+var import_react19 = require("react");
+
+// src/components/Filters/FilterPanel.module.css
+var FilterPanel_default = {};
+
+// src/components/Filters/FilterPanel.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var DISCOUNT_OPTIONS = [
+  { value: "50", label: "50%" },
+  { value: "30", label: "30%" },
+  { value: "10", label: "10%" }
+];
+var OPTIONS_FILTER = [
+  { value: "instant_booking", labelKey: "filter.instant-booking" }
+];
+var FilterPanel = ({
+  onFilterChange,
+  className = "",
+  isLoading = false,
+  priceHistogram,
+  minPrice = 50,
+  maxPrice = 500,
+  regions = [],
+  discountCounts = {},
+  optionsCounts = {},
+  categoryCounts = {},
+  themes = [],
+  mealsCounts = {},
+  reviewsCounts = {},
+  transportCounts = {},
+  wellnessCounts = {},
+  servicesCounts = {},
+  filterOptions,
+  selectedDiscounts: externalDiscounts,
+  selectedOptions: externalOptions,
+  selectedExperiences: externalExperiences,
+  selectedRegions: externalRegions,
+  selectedCategories: externalCategories,
+  selectedMeals: externalMeals,
+  selectedReviews: externalReviews,
+  selectedTransport: externalTransport,
+  selectedWellness: externalWellness,
+  selectedServices: externalServices,
+  selectedPriceRange: externalPriceRange
+}) => {
+  const { t, currency } = useUIContext();
+  const hasInitialLoadRef = (0, import_react19.useRef)(false);
+  if (!hasInitialLoadRef.current) {
+    if (regions.length > 0 || priceHistogram && priceHistogram.length > 0 || Object.keys(discountCounts).length > 0 || Object.keys(categoryCounts).length > 0) {
+      hasInitialLoadRef.current = true;
+    }
+  }
+  const [priceMin, setPriceMin] = (0, import_react19.useState)(externalPriceRange?.min ?? minPrice);
+  const [priceMax, setPriceMax] = (0, import_react19.useState)(externalPriceRange?.max ?? maxPrice);
+  const [selectedRegions, setSelectedRegions] = (0, import_react19.useState)(externalRegions ?? []);
+  const [selectedDiscounts, setSelectedDiscounts] = (0, import_react19.useState)(externalDiscounts ?? []);
+  const [selectedOptions, setSelectedOptions] = (0, import_react19.useState)(externalOptions ?? []);
+  const [selectedCategories, setSelectedCategories] = (0, import_react19.useState)(externalCategories ?? []);
+  const [selectedExperiences, setSelectedExperiences] = (0, import_react19.useState)(externalExperiences ?? []);
+  const [selectedMeals, setSelectedMeals] = (0, import_react19.useState)(externalMeals ?? []);
+  const [selectedReviews, setSelectedReviews] = (0, import_react19.useState)(externalReviews ?? []);
+  const [selectedTransport, setSelectedTransport] = (0, import_react19.useState)(externalTransport ?? []);
+  const [selectedWellness, setSelectedWellness] = (0, import_react19.useState)(externalWellness ?? []);
+  const [selectedServices, setSelectedServices] = (0, import_react19.useState)(externalServices ?? []);
+  (0, import_react19.useEffect)(() => {
+    if (externalPriceRange) {
+      setPriceMin(externalPriceRange.min);
+      setPriceMax(externalPriceRange.max);
+    } else {
+      setPriceMin(minPrice);
+      setPriceMax(maxPrice);
+    }
+  }, [externalPriceRange, minPrice, maxPrice]);
+  (0, import_react19.useEffect)(() => {
+    if (externalDiscounts !== void 0) setSelectedDiscounts(externalDiscounts);
+  }, [externalDiscounts]);
+  (0, import_react19.useEffect)(() => {
+    if (externalOptions !== void 0) setSelectedOptions(externalOptions);
+  }, [externalOptions]);
+  (0, import_react19.useEffect)(() => {
+    if (externalExperiences !== void 0) setSelectedExperiences(externalExperiences);
+  }, [externalExperiences]);
+  (0, import_react19.useEffect)(() => {
+    if (externalRegions !== void 0) setSelectedRegions(externalRegions);
+  }, [externalRegions]);
+  (0, import_react19.useEffect)(() => {
+    if (externalCategories !== void 0) setSelectedCategories(externalCategories);
+  }, [externalCategories]);
+  (0, import_react19.useEffect)(() => {
+    if (externalMeals !== void 0) setSelectedMeals(externalMeals);
+  }, [externalMeals]);
+  (0, import_react19.useEffect)(() => {
+    if (externalReviews !== void 0) setSelectedReviews(externalReviews);
+  }, [externalReviews]);
+  (0, import_react19.useEffect)(() => {
+    if (externalTransport !== void 0) setSelectedTransport(externalTransport);
+  }, [externalTransport]);
+  (0, import_react19.useEffect)(() => {
+    if (externalWellness !== void 0) setSelectedWellness(externalWellness);
+  }, [externalWellness]);
+  (0, import_react19.useEffect)(() => {
+    if (externalServices !== void 0) setSelectedServices(externalServices);
+  }, [externalServices]);
+  const handlePriceChange = (value) => {
+    setPriceMin(value.min);
+    setPriceMax(value.max);
+  };
+  const handlePriceSearch = (0, import_react19.useCallback)(async (range) => {
+    await onFilterChange?.({ priceRange: range });
+  }, [onFilterChange]);
+  const debouncedFetch = useDebounce(handlePriceSearch, 500);
+  const handlePriceApply = (range) => {
+    debouncedFetch(range);
+  };
+  const handleDiscountToggle = (discountValue) => {
+    setSelectedDiscounts((prev) => {
+      const newDiscounts = prev.includes(discountValue) ? prev.filter((d) => d !== discountValue) : [...prev, discountValue];
+      onFilterChange?.({ discounts: newDiscounts });
+      return newDiscounts;
+    });
+  };
+  const handleOptionToggle = (optionValue) => {
+    setSelectedOptions((prev) => {
+      const newOptions = prev.includes(optionValue) ? prev.filter((o) => o !== optionValue) : [...prev, optionValue];
+      onFilterChange?.({ options: newOptions });
+      return newOptions;
+    });
+  };
+  const handleServicesChange = (values) => {
+    setSelectedServices(values);
+    onFilterChange?.({ services: values });
+  };
+  const handleRegionsChange = (values) => {
+    setSelectedRegions(values);
+    onFilterChange?.({ regions: values });
+  };
+  const handleExperienceChange = (values) => {
+    setSelectedExperiences(values);
+    onFilterChange?.({ experiences: values });
+  };
+  const handleCategoriesChange = (values) => {
+    setSelectedCategories(values);
+    onFilterChange?.({ categories: values });
+  };
+  const handleMealsChange = (values) => {
+    setSelectedMeals(values);
+    onFilterChange?.({ meals: values });
+  };
+  const handleReviewsChange = (values) => {
+    setSelectedReviews(values);
+    onFilterChange?.({ ratings: values });
+  };
+  const handleTransportChange = (values) => {
+    setSelectedTransport(values);
+    onFilterChange?.({ transport: values });
+  };
+  const handleWellnessChange = (values) => {
+    setSelectedWellness(values);
+    onFilterChange?.({ wellness: values });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("aside", { className: `${FilterPanel_default.filterPanel} ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: FilterPanel_default.content, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      CollapsibleFilterSection,
+      {
+        title: t("filter.destination", "Destination"),
+        defaultExpanded: true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          RegionsFilter,
+          {
+            regions,
+            selected: selectedRegions,
+            onChange: handleRegionsChange
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      CollapsibleFilterSection,
+      {
+        title: t("filter.experience", "Experience"),
+        defaultExpanded: selectedExperiences.length > 0,
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          ExperienceFilter,
+          {
+            selected: selectedExperiences,
+            themes,
+            onChange: handleExperienceChange
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      CollapsibleFilterSection,
+      {
+        title: t("filter.price", "Price"),
+        defaultExpanded: true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          PriceRangeFilter,
+          {
+            minPrice,
+            maxPrice,
+            value: { min: priceMin, max: priceMax },
+            onChange: handlePriceChange,
+            onApply: handlePriceApply,
+            histogram: priceHistogram,
+            currency
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      CollapsibleFilterSection,
+      {
+        title: t("filter.discount", "Discount"),
+        defaultExpanded: true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: FilterPanel_default.discountList, children: DISCOUNT_OPTIONS.map((option) => {
+          const count = discountCounts[option.value];
+          const isDisabled = count === 0 && !selectedDiscounts.includes(option.value);
+          return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            FilterCheckboxItem,
+            {
+              id: `discount-${option.value}`,
+              label: option.label,
+              count,
+              checked: selectedDiscounts.includes(option.value),
+              disabled: isDisabled,
+              onChange: () => handleDiscountToggle(option.value)
+            },
+            option.value
+          );
+        }) })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      CollapsibleFilterSection,
+      {
+        title: t("filter.options", "Options"),
+        defaultExpanded: selectedOptions.length > 0 || selectedServices.length > 0,
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: FilterPanel_default.discountList, children: [
+          OPTIONS_FILTER.map((option) => {
+            const count = optionsCounts[option.value];
+            const isDisabled = count === 0 && !selectedOptions.includes(option.value);
+            return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              FilterCheckboxItem,
+              {
+                id: `option-${option.value}`,
+                label: t(option.labelKey, "Instantly bookable"),
+                count,
+                checked: selectedOptions.includes(option.value),
+                disabled: isDisabled,
+                onChange: () => handleOptionToggle(option.value)
+              },
+              option.value
+            );
+          }),
+          filterOptions?.services?.map((option) => {
+            const count = servicesCounts[option.key];
+            const isDisabled = count === 0 && !selectedServices.includes(option.key);
+            return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              FilterCheckboxItem,
+              {
+                id: `service-${option.key}`,
+                label: option.name,
+                count,
+                checked: selectedServices.includes(option.key),
+                disabled: isDisabled,
+                onChange: () => handleServicesChange(
+                  selectedServices.includes(option.key) ? selectedServices.filter((v) => v !== option.key) : [...selectedServices, option.key]
+                )
+              },
+              option.key
+            );
+          })
+        ] })
+      }
+    ),
+    filterOptions?.meals && filterOptions.meals.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      CollapsibleFilterSection,
+      {
+        title: t("filter.meals", "Meals"),
+        defaultExpanded: selectedMeals.length > 0,
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          MealsFilter,
+          {
+            selected: selectedMeals,
+            counts: mealsCounts,
+            options: filterOptions.meals,
+            onChange: handleMealsChange
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      CollapsibleFilterSection,
+      {
+        title: t("filter.hotel-category", "Hotel category"),
+        defaultExpanded: true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          HotelCategoryFilter,
+          {
+            selected: selectedCategories,
+            counts: categoryCounts,
+            onChange: handleCategoriesChange
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      CollapsibleFilterSection,
+      {
+        title: t("filter.reviews", "Reviews"),
+        defaultExpanded: selectedReviews.length > 0,
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          ReviewsFilter,
+          {
+            selected: selectedReviews,
+            counts: reviewsCounts,
+            onChange: handleReviewsChange
+          }
+        )
+      }
+    ),
+    filterOptions?.transport && filterOptions.transport.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      CollapsibleFilterSection,
+      {
+        title: t("filter.mobility", "Mobility"),
+        defaultExpanded: selectedTransport.length > 0,
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          TransportFilter,
+          {
+            selected: selectedTransport,
+            counts: transportCounts,
+            options: filterOptions.transport,
+            onChange: handleTransportChange
+          }
+        )
+      }
+    ),
+    filterOptions?.wellness && filterOptions.wellness.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      CollapsibleFilterSection,
+      {
+        title: t("filter.wellness-spa", "Wellness & Spa"),
+        defaultExpanded: selectedWellness.length > 0,
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          WellnessFilter,
+          {
+            selected: selectedWellness,
+            counts: wellnessCounts,
+            options: filterOptions.wellness,
+            onChange: handleWellnessChange
+          }
+        )
+      }
+    )
+  ] }) });
+};
+
+// src/components/Filters/FilterModal.tsx
+var import_react20 = require("react");
+
+// src/components/Filters/FilterModal.module.css
+var FilterModal_default = {};
+
+// src/components/Filters/FilterModal.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var CloseIcon3 = () => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "M0.275391 1.59961C-0.0917969 1.23242 -0.0917969 0.638672 0.275391 0.275391C0.642578 -0.0878906 1.23633 -0.0917969 1.59961 0.275391L7.49805 6.17383L13.3965 0.275391C13.7637 -0.0917969 14.3574 -0.0917969 14.7207 0.275391C15.084 0.642578 15.0879 1.23633 14.7207 1.59961L8.82226 7.49805L14.7207 13.3965C15.0879 13.7637 15.0879 14.3574 14.7207 14.7207C14.3535 15.084 13.7598 15.0879 13.3965 14.7207L7.49805 8.82226L1.59961 14.7207C1.23242 15.0879 0.638672 15.0879 0.275391 14.7207C-0.0878906 14.3535 -0.0917969 13.7598 0.275391 13.3965L6.17383 7.49805L0.275391 1.59961Z", fill: "#1F2937" }) });
+var FilterModal = ({
+  isOpen,
+  onClose,
+  resultCount = 0,
+  selectedFilters = [],
+  onRemoveFilter,
+  onClearAllFilters,
+  onFilterChange,
+  selectedDiscounts = [],
+  selectedOptions = [],
+  selectedCategories = [],
+  selectedExperiences = [],
+  selectedRegions = [],
+  selectedMeals = [],
+  selectedWellness = [],
+  selectedServices = [],
+  selectedTransport = [],
+  selectedReviews = [],
+  selectedPriceRange,
+  minPrice = 0,
+  maxPrice = 500,
+  regions = [],
+  ...filterPanelProps
+}) => {
+  const { t } = useUIContext();
+  const hasSelectedFilters = selectedFilters.length > 0;
+  (0, import_react20.useEffect)(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = "";
+      };
+    }
+  }, [isOpen]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: FilterModal_default.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: FilterModal_default.modal, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: FilterModal_default.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h2", { className: FilterModal_default.title, children: t("filter.filters", "Filters") }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        Button,
+        {
+          variant: "secondary",
+          size: "small",
+          iconOnly: true,
+          onClick: onClose,
+          "aria-label": t("filter.close", "Close"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CloseIcon3, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: FilterModal_default.content, children: [
+      selectedFilters.length > 0 && onRemoveFilter && onClearAllFilters && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: FilterModal_default.selectedFilters, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        SelectedFiltersRow,
+        {
+          filters: selectedFilters,
+          onRemove: onRemoveFilter,
+          onClearAll: onClearAllFilters
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        FilterPanel,
+        {
+          ...filterPanelProps,
+          onFilterChange,
+          selectedDiscounts,
+          selectedOptions,
+          selectedCategories,
+          selectedExperiences,
+          selectedRegions,
+          selectedMeals,
+          selectedWellness,
+          selectedServices,
+          selectedTransport,
+          selectedReviews,
+          selectedPriceRange,
+          minPrice,
+          maxPrice,
+          regions,
+          className: FilterModal_default.filterPanel
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: FilterModal_default.footer, children: [
+      onClearAllFilters && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        Button,
+        {
+          variant: "link",
+          className: FilterModal_default.footerLink,
+          onClick: onClearAllFilters,
+          disabled: !hasSelectedFilters,
+          children: t("filter.clear-all", "Clear all")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        Button,
+        {
+          variant: "primary",
+          size: "medium",
+          onClick: onClose,
+          children: t("filter.show-results", "Show {count} results").replace("{count}", String(resultCount))
+        }
+      )
+    ] })
+  ] }) });
+};
+
+// src/components/icons/HeartIcon.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var HeartIcon3 = ({ filled = false, className = "", size = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
   "svg",
   {
     width: size,
@@ -2987,14 +4337,14 @@ var HeartIcon3 = ({ filled = false, className = "", size = 24 }) => /* @__PURE__
     strokeWidth: 2,
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })
   }
 );
 HeartIcon3.displayName = "HeartIcon";
 
 // src/components/icons/StarIcon.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var StarIcon4 = ({ filled = true, className = "", size = 9 }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var StarIcon4 = ({ filled = true, className = "", size = 9 }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3004,22 +4354,22 @@ var StarIcon4 = ({ filled = true, className = "", size = 9 }) => /* @__PURE__ */
     fill: "none",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("g", { clipPath: "url(#clip0_star_icon)", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("g", { clipPath: "url(#clip0_star_icon)", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "path",
         {
           d: "M4.80018 0.366577C4.93104 0.366577 5.05173 0.440968 5.11135 0.557659L6.18011 2.66102L8.50521 3.03152C8.63462 3.05194 8.74222 3.14383 8.78294 3.26927C8.82365 3.39472 8.79021 3.53183 8.6986 3.62518L7.03366 5.29533L7.40155 7.6277C7.42191 7.75752 7.3681 7.88879 7.26195 7.9661C7.15581 8.04341 7.01476 8.05508 6.89843 7.99528L4.80018 6.92463L2.70192 7.99528C2.58559 8.05508 2.44454 8.04341 2.33839 7.9661C2.23225 7.88879 2.17844 7.75898 2.1988 7.6277L2.56523 5.29533L0.901751 3.62518C0.808689 3.53183 0.776699 3.39472 0.817413 3.26927C0.858128 3.14383 0.964277 3.05194 1.09515 3.03152L3.42024 2.66102L4.49045 0.557659C4.55007 0.440968 4.67076 0.366577 4.80163 0.366577H4.80018Z",
           fill: filled ? "#1F2937" : "#D1D5DB"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("clipPath", { id: "clip0_star_icon", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("rect", { width: "8", height: "8", fill: "white", transform: "translate(0.800049 0.199951)" }) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("clipPath", { id: "clip0_star_icon", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("rect", { width: "8", height: "8", fill: "white", transform: "translate(0.800049 0.199951)" }) }) })
     ]
   }
 );
 StarIcon4.displayName = "StarIcon";
 
 // src/components/icons/ChevronLeftIcon.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var ChevronLeftIcon = ({ className = "", size = 20 }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var ChevronLeftIcon = ({ className = "", size = 20 }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3032,14 +4382,14 @@ var ChevronLeftIcon = ({ className = "", size = 20 }) => /* @__PURE__ */ (0, imp
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className,
-    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("polyline", { points: "15 18 9 12 15 6" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("polyline", { points: "15 18 9 12 15 6" })
   }
 );
 ChevronLeftIcon.displayName = "ChevronLeftIcon";
 
 // src/components/icons/ChevronRightIcon.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var ChevronRightIcon2 = ({ className = "", size = 20 }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var ChevronRightIcon2 = ({ className = "", size = 20 }) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3052,14 +4402,14 @@ var ChevronRightIcon2 = ({ className = "", size = 20 }) => /* @__PURE__ */ (0, i
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className,
-    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("polyline", { points: "9 18 15 12 9 6" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("polyline", { points: "9 18 15 12 9 6" })
   }
 );
 ChevronRightIcon2.displayName = "ChevronRightIcon";
 
 // src/components/icons/PinIcon.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var PinIcon2 = ({ className = "", size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var PinIcon2 = ({ className = "", size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3069,7 +4419,7 @@ var PinIcon2 = ({ className = "", size = 16 }) => /* @__PURE__ */ (0, import_jsx
     fill: "none",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -3078,7 +4428,7 @@ var PinIcon2 = ({ className = "", size = 16 }) => /* @__PURE__ */ (0, import_jsx
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -3127,31 +4477,47 @@ var calculateDiscount = (originalPrice, discountedPrice) => {
   Benefits,
   Block,
   Button,
+  CATEGORY_OPTIONS,
   Card,
   Checkbox,
+  CheckboxFilter,
   ChevronLeftIcon,
   ChevronRightIcon,
   Chip,
+  CollapsibleFilterSection,
   DateSelector,
   Divider,
   Dropdown,
   DualCalendar,
+  ExperienceFilter,
   FAQ,
+  FilterCheckboxItem,
+  FilterModal,
+  FilterPanel,
   GuestContent,
   HeartIcon,
   HotelCard,
   HotelCardContent,
   HotelCardImage,
   HotelCardUIProvider,
+  HotelCategoryFilter,
   Input,
+  MealsFilter,
   Modal,
   Pin,
   PinIcon,
+  PriceRangeFilter,
+  REVIEW_OPTIONS,
   RadioButton,
   Rating,
+  RegionsFilter,
   ReviewCard,
+  ReviewsFilter,
   SectionHeader,
+  SelectedFiltersRow,
   StarIcon,
+  TransportFilter,
+  WellnessFilter,
   WhenContent,
   calculateDiscount,
   formatDate,