@hotelcard/ui 0.0.16 → 0.0.18

package/dist/index.cjs

@@ -49,6 +49,8 @@ __export(index_exports, {
   ExperienceFilter: () => ExperienceFilter,
   FAQ: () => FAQ,
   FilterCheckboxItem: () => FilterCheckboxItem,
+  FilterModal: () => FilterModal,
+  FilterPanel: () => FilterPanel,
   GuestContent: () => GuestContent,
   HeartIcon: () => HeartIcon3,
   HotelCard: () => HotelCard,
@@ -3848,9 +3850,482 @@ var SelectedFiltersRow = ({
   ] }) });
 };
 
-// src/components/icons/HeartIcon.tsx
+// 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 HeartIcon3 = ({ filled = false, className = "", size = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+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,
@@ -3862,14 +4337,14 @@ var HeartIcon3 = ({ filled = false, className = "", size = 24 }) => /* @__PURE__
     strokeWidth: 2,
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ (0, import_jsx_runtime35.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_runtime36 = require("react/jsx-runtime");
-var StarIcon4 = ({ filled = true, className = "", size = 9 }) => /* @__PURE__ */ (0, import_jsx_runtime36.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",
@@ -3879,22 +4354,22 @@ var StarIcon4 = ({ filled = true, className = "", size = 9 }) => /* @__PURE__ */
     fill: "none",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("g", { clipPath: "url(#clip0_star_icon)", children: /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("clipPath", { id: "clip0_star_icon", children: /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime37 = require("react/jsx-runtime");
-var ChevronLeftIcon = ({ className = "", size = 20 }) => /* @__PURE__ */ (0, import_jsx_runtime37.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",
@@ -3907,14 +4382,14 @@ var ChevronLeftIcon = ({ className = "", size = 20 }) => /* @__PURE__ */ (0, imp
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className,
-    children: /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime38 = require("react/jsx-runtime");
-var ChevronRightIcon2 = ({ className = "", size = 20 }) => /* @__PURE__ */ (0, import_jsx_runtime38.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",
@@ -3927,14 +4402,14 @@ var ChevronRightIcon2 = ({ className = "", size = 20 }) => /* @__PURE__ */ (0, i
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className,
-    children: /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime39 = require("react/jsx-runtime");
-var PinIcon2 = ({ className = "", size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime39.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",
@@ -3944,7 +4419,7 @@ var PinIcon2 = ({ className = "", size = 16 }) => /* @__PURE__ */ (0, import_jsx
     fill: "none",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -3953,7 +4428,7 @@ var PinIcon2 = ({ className = "", size = 16 }) => /* @__PURE__ */ (0, import_jsx
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -4017,6 +4492,8 @@ var calculateDiscount = (originalPrice, discountedPrice) => {
   ExperienceFilter,
   FAQ,
   FilterCheckboxItem,
+  FilterModal,
+  FilterPanel,
   GuestContent,
   HeartIcon,
   HotelCard,