@devtravelcode/widget-native 1.0.2 → 1.0.3

package/dist/App.js

@@ -58,7 +58,10 @@ const App = ({ lang, currency, onFlightSelect, onHotelSelect, onCarSelect }) =>
             return t.banner_car ?? defaultTexts.car;
         return "";
     };
-    const showHeadings = config?.texts?.headings_visible !== false;
+    const bannerText = getBannerText();
+    const showHeadings = config?.texts?.headings_visible !== false &&
+        config?.headings_visible !== false &&
+        !!bannerText;
     const { results: flightResults, filtersData, airlinesData, dictionaries, currencySign, loading: flightLoading, isFiltering: flightIsFiltering, isPageLoading: flightIsPageLoading, error: flightError, status: flightStatus, total: flightTotal, limit: flightLimit, offset: flightOffset, sessionId, startSearch: startFlightSearch, applyFilters: applyFlightFilters, fetchPage: fetchFlightPage, reset: resetFlights, } = useFlightSearch();
     const [hasFlightSearched, setHasFlightSearched] = useState(false);
     useEffect(() => {
@@ -133,14 +136,14 @@ const App = ({ lang, currency, onFlightSelect, onHotelSelect, onCarSelect }) =>
         { color: colors.textHeadings || Colors.white },
     ];
     if (activeTab === "hotels") {
-        const hotelHeader = (_jsxs(_Fragment, { children: [showHeadings && (_jsx(View, { style: bannerStyle, children: _jsx(Text, { style: bannerTextStyle, children: getBannerText() }) })), _jsx(Navbar, { activeTab: activeTab, onTabChange: setActiveTab, translations: translations }), _jsx(HotelSearchForm, { translations: translations, fetchHotelOffers: isPreview ? async () => { } : handleHotelSearch, loading: hotelLoading && !isPreview, onSearchParamsChange: setHotelSearchParams, isPreview: isPreview, expiration: hotelExpiration, hasSearched: hasHotelSearched })] }));
-        return (_jsx(View, { style: styles.container, children: _jsx(HotelResults, { offers: hotelOffers, allHotels: hotelAllHotels, loading: hotelLoading, isStreaming: hotelIsStreaming, isPageLoading: hotelIsPageLoading, error: hotelError, translations: translations, lang: appLang, searchParams: hotelSearchParams, total: hotelTotal, offset: hotelOffset, limit: hotelLimit, fetchPage: fetchHotelPage, filterSearch: filterHotelSearch, currency: appCurrency, headerComponent: hotelHeader }) }));
+        const hotelHeader = (_jsxs(_Fragment, { children: [showHeadings && (_jsx(View, { style: bannerStyle, children: _jsx(Text, { style: bannerTextStyle, children: bannerText }) })), _jsx(Navbar, { activeTab: activeTab, onTabChange: setActiveTab, translations: translations }), _jsx(HotelSearchForm, { translations: translations, fetchHotelOffers: isPreview ? async () => { } : handleHotelSearch, loading: hotelLoading && !isPreview, onSearchParamsChange: setHotelSearchParams, isPreview: isPreview, expiration: hotelExpiration, hasSearched: hasHotelSearched })] }));
+        return (_jsx(View, { style: styles.container, children: _jsx(HotelResults, { offers: hotelOffers, allHotels: hotelAllHotels, loading: hotelLoading, isStreaming: hotelIsStreaming, isPageLoading: hotelIsPageLoading, error: hotelError, translations: translations, lang: appLang, searchParams: hotelSearchParams, total: hotelTotal, offset: hotelOffset, limit: hotelLimit, fetchPage: fetchHotelPage, filterSearch: filterHotelSearch, currency: appCurrency, headerComponent: hotelHeader, streamCompleted: hotelStreamCompleted }) }));
     }
     if (activeTab === "cars") {
-        const carHeader = (_jsxs(_Fragment, { children: [showHeadings && (_jsx(View, { style: bannerStyle, children: _jsx(Text, { style: bannerTextStyle, children: getBannerText() }) })), _jsx(Navbar, { activeTab: activeTab, onTabChange: setActiveTab, translations: translations }), _jsx(CarSearchForm, { startSearch: isPreview ? async () => null : handleCarSearch, loading: carLoading && !isPreview, error: carError, onDaysChange: setCarDays, onSearchParamsChange: setCarSearchParams, translations: translations, isPreview: isPreview, expiration: carExpiration, hasSearched: hasCarSearched })] }));
+        const carHeader = (_jsxs(_Fragment, { children: [showHeadings && (_jsx(View, { style: bannerStyle, children: _jsx(Text, { style: bannerTextStyle, children: bannerText }) })), _jsx(Navbar, { activeTab: activeTab, onTabChange: setActiveTab, translations: translations }), _jsx(CarSearchForm, { startSearch: isPreview ? async () => null : handleCarSearch, loading: carLoading && !isPreview, error: carError, onDaysChange: setCarDays, onSearchParamsChange: setCarSearchParams, translations: translations, isPreview: isPreview, expiration: carExpiration, hasSearched: hasCarSearched })] }));
         return (_jsx(View, { style: styles.container, children: _jsx(CarResults, { offers: carOffers, filteredOffers: carFilteredOffers, paginatedOffers: carPaginatedOffers, loading: carLoading, error: carError, isFiltering: carIsFiltering, hasAppliedFilters: carHasAppliedFilters, onFilterChange: () => { }, onFiltersApplied: () => setCarHasAppliedFilters(true), days: carDays, searchParams: carSearchParams, translations: translations, hasCarSearched: hasCarSearched, lang: appLang, currency: appCurrency, currentPage: carCurrentPage, totalPages: carTotalPages, onPageChange: setCarCurrentPage, isPageLoading: false, headerComponent: carHeader }) }));
     }
-    const flightHeader = (_jsxs(_Fragment, { children: [showHeadings && (_jsx(View, { style: bannerStyle, children: _jsx(Text, { style: bannerTextStyle, children: getBannerText() }) })), _jsx(Navbar, { activeTab: activeTab, onTabChange: setActiveTab, translations: translations }), _jsx(FlightSearchForm, { startSearch: isPreview ? async () => null : startFlightSearch, loading: flightLoading && !isPreview, error: flightError, currency: appCurrency, translations: translations, isPreview: isPreview, expiration: flightExpiration, hasSearched: hasFlightSearched }), flightLoading && !flightIsFiltering && (_jsx(ProvidersLoader, { active: flightLoading, type: "flights", translations: translations })), hasFlightSearched && !flightLoading && (flightTotal > 0 || hasFlightFilters) && (_jsx(View, { style: styles.totalCount, children: _jsxs(Text, { style: styles.totalCountText, children: [translations["results_found"], " ", flightTotal, " ", flightTotal === 1 ? translations["flight_singular"] : translations["flight_many"]] }) })), isFlightEmptyAfterSearch && (_jsxs(View, { style: styles.emptyState, children: [_jsx(Text, { style: styles.emptyTitle, children: translations["flights_not_found_title"] || "No flights found" }), _jsx(Text, { style: styles.emptyHint, children: translations["flights_not_found_hint"] || "Try adjusting your search parameters" })] })), isFlightEmptyAfterFilters && (_jsxs(_Fragment, { children: [_jsx(FlightFilters, { filters: filtersData, airlines: airlinesData, sessionId: sessionId, onApplyFilters: applyFlightFilters, translations: translations }), _jsxs(View, { style: styles.emptyState, children: [_jsx(Text, { style: styles.emptyTitle, children: translations["flights_not_found_title"] || "No flights found" }), _jsx(Text, { style: styles.emptyHint, children: translations["flights_not_found_hint"] || "Try adjusting your search parameters" })] })] })), !isFlightEmptyAfterSearch && !isFlightEmptyAfterFilters && (_jsx(_Fragment, { children: flightLoading && !flightIsFiltering ? (_jsx(FlightsSkeleton, { translations: translations })) : ((filtersData || flightResults.length > 0) && (_jsx(FlightFilters, { filters: filtersData, airlines: airlinesData, sessionId: sessionId, onApplyFilters: applyFlightFilters, translations: translations }))) }))] }));
+    const flightHeader = (_jsxs(_Fragment, { children: [showHeadings && (_jsx(View, { style: bannerStyle, children: _jsx(Text, { style: bannerTextStyle, children: bannerText }) })), _jsx(Navbar, { activeTab: activeTab, onTabChange: setActiveTab, translations: translations }), _jsx(FlightSearchForm, { startSearch: isPreview ? async () => null : startFlightSearch, loading: flightLoading && !isPreview, error: flightError, currency: appCurrency, translations: translations, isPreview: isPreview, expiration: flightExpiration, hasSearched: hasFlightSearched }), flightLoading && !flightIsFiltering && (_jsx(ProvidersLoader, { active: flightLoading, type: "flights", translations: translations })), hasFlightSearched && !flightLoading && (flightTotal > 0 || hasFlightFilters) && (_jsx(View, { style: styles.totalCount, children: _jsxs(Text, { style: styles.totalCountText, children: [translations["results_found"], " ", flightTotal, " ", flightTotal === 1 ? translations["flight_singular"] : translations["flight_many"]] }) })), isFlightEmptyAfterSearch && (_jsxs(View, { style: styles.emptyState, children: [_jsx(Text, { style: styles.emptyTitle, children: translations["flights_not_found_title"] || "No flights found" }), _jsx(Text, { style: styles.emptyHint, children: translations["flights_not_found_hint"] || "Try adjusting your search parameters" })] })), isFlightEmptyAfterFilters && (_jsxs(_Fragment, { children: [_jsx(FlightFilters, { filters: filtersData, airlines: airlinesData, sessionId: sessionId, onApplyFilters: applyFlightFilters, translations: translations }), _jsxs(View, { style: styles.emptyState, children: [_jsx(Text, { style: styles.emptyTitle, children: translations["flights_not_found_title"] || "No flights found" }), _jsx(Text, { style: styles.emptyHint, children: translations["flights_not_found_hint"] || "Try adjusting your search parameters" })] })] })), !isFlightEmptyAfterSearch && !isFlightEmptyAfterFilters && (_jsx(_Fragment, { children: flightLoading && !flightIsFiltering ? (_jsx(FlightsSkeleton, { translations: translations })) : ((filtersData || flightResults.length > 0) && (_jsx(FlightFilters, { filters: filtersData, airlines: airlinesData, sessionId: sessionId, onApplyFilters: applyFlightFilters, translations: translations }))) }))] }));
     return (_jsx(View, { style: styles.container, children: _jsx(FlightResults, { results: flightResults, loading: flightLoading, isFiltering: flightIsFiltering, dictionaries: dictionaries, currencySign: currencySign, airlines: airlinesData, sessionId: sessionId, filtersData: filtersData, total: flightTotal, limit: flightLimit, offset: flightOffset, isPageLoading: flightIsPageLoading, fetchPage: fetchFlightPage, translations: translations, lang: appLang, onFlightSelect: onFlightSelect, headerComponent: flightHeader }) }));
 };
 const styles = StyleSheet.create({

package/dist/modules/hooks/useHotelMapData.d.ts

@@ -5,7 +5,7 @@ export type HotelPin = {
     total: number | null;
     soldOut: boolean;
 };
-export declare const useHotelMapData: (params: Record<string, any>, shouldFetch?: boolean) => {
+export declare const useHotelMapData: (params: Record<string, any> | null, shouldFetch?: boolean) => {
     pins: HotelPin[];
     loading: boolean;
     fetchFailed: boolean;

package/dist/modules/hooks/useHotelMapData.js

@@ -1,14 +1,13 @@
 import { useState, useEffect, useRef, useCallback } from "react";
 import { useApiToken } from "../../utils/getToken";
 const API_BASE = "https://api.travel-code.com/v1/search/hotels/map";
-export const useHotelMapData = (params, shouldFetch = true) => {
+export const useHotelMapData = (params, shouldFetch = false) => {
     const token = useApiToken();
     const [pins, setPins] = useState([]);
     const [loading, setLoading] = useState(false);
     const [fetchFailed, setFetchFailed] = useState(false);
     const lastParamsRef = useRef("");
-    const fetchPins = useCallback(async () => {
-        console.log("%c[useHotelMapData] 🚀 СТАРТ ЗАПРОСА", "color:#fff;background:#43a047;padding:3px 6px;border-radius:4px", { params });
+    const fetchPins = useCallback(async (searchParams) => {
         setLoading(true);
         setFetchFailed(false);
         try {
@@ -18,61 +17,56 @@ export const useHotelMapData = (params, shouldFetch = true) => {
                     "Content-Type": "application/json",
                     Authorization: `Bearer ${token}`,
                 },
-                body: JSON.stringify(params),
+                body: JSON.stringify(searchParams),
             });
-            console.log("%c[useHotelMapData] 📥 ОТВЕТ ПОЛУЧЕН", "color:#fff;background:#5e35b1;padding:3px 6px;border-radius:4px", { status: response.status });
             if (!response.ok)
-                throw new Error(`Ошибка ${response.status}`);
+                throw new Error(`Error ${response.status}`);
             const result = await response.json();
-            console.log("%c[useHotelMapData] 🟢 pins:", "color:#fff;background:#00897b;padding:3px 6px;border-radius:4px", result?.data?.length);
-            if (result?.data?.length) {
-                const formatted = result.data
+            const hotels = Array.isArray(result?.data) ? result.data : Array.isArray(result?.hotels) ? result.hotels : [];
+            if (hotels.length) {
+                const formatted = hotels
                     .filter((item) => {
                     const lat = parseFloat(item.latitude);
                     const lng = parseFloat(item.longitude);
                     return lat && lng && lat !== 0 && lng !== 0;
                 })
-                    .map((item) => ({
-                    id: String(item.propertyId),
-                    latitude: parseFloat(item.latitude),
-                    longitude: parseFloat(item.longitude),
-                    total: typeof item.total === "number" ? item.total : null,
-                    soldOut: item.soldOut === true ||
-                        item.total === null,
-                }));
+                    .map((item) => {
+                    const price = item.total ?? item.price ?? null;
+                    return {
+                        id: String(item.propertyId || item.id),
+                        latitude: parseFloat(item.latitude),
+                        longitude: parseFloat(item.longitude),
+                        total: typeof price === "number" ? price : null,
+                        soldOut: item.soldOut === true || price == null,
+                    };
+                });
                 setPins(formatted);
             }
             else {
-                console.log("%c[useHotelMapData] ⚠️ Нет данных", "color:#fb8c00");
                 setPins([]);
             }
         }
-        catch (err) {
-            console.error("%c[useHotelMapData] 🔥 ОШИБКА", "background:red;color:white", err);
+        catch {
             setFetchFailed(true);
         }
         finally {
-            console.log("%c[useHotelMapData] ⏹ ЗАПРОС ЗАВЕРШЕН", "color:#fff;background:#6d4c41;padding:3px 6px;border-radius:4px");
             setLoading(false);
         }
-    }, [params, token]);
+    }, [token]);
     useEffect(() => {
-        console.log("%c[useHotelMapData] EFFECT TRIGGERED", "color:#fff;background:#1e88e5;padding:3px 6px;border-radius:4px", { params, shouldFetch });
         if (!shouldFetch) {
-            console.log("%c[useHotelMapData] ❌ shouldFetch = false → запрос НЕ отправлен", "color:#ef5350");
-            return;
+            setPins([]);
+            lastParamsRef.current = "";
         }
-        if (!params || Object.keys(params).length === 0) {
-            console.log("%c[useHotelMapData] ❌ Пустые params → запрос НЕ отправлен", "color:#ef5350");
+    }, [shouldFetch]);
+    useEffect(() => {
+        if (!shouldFetch || !params || Object.keys(params).length === 0)
             return;
-        }
         const key = JSON.stringify(params);
-        if (key === lastParamsRef.current) {
-            console.log("%c[useHotelMapData] 🔁 Те же params → запрос пропущен", "color:#ffa726");
+        if (key === lastParamsRef.current)
             return;
-        }
         lastParamsRef.current = key;
-        fetchPins();
+        fetchPins(params);
     }, [params, shouldFetch, fetchPins]);
     return { pins, loading, fetchFailed };
 };

package/dist/modules/search-form/AgeSelector.js

@@ -6,6 +6,7 @@ import Svg, { Path } from "react-native-svg";
 import { Colors, Spacing, FontSize } from "../../theme/colors";
 import { CloseIcon } from "../../store";
 import { formStyles } from "../../theme/formStyles";
+import { useWidget } from "../../context/WidgetContext";
 const ChevronDown = () => (_jsx(Svg, { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", children: _jsx(Path, { d: "M5 8L10 12.5L15 8", stroke: Colors.primary, strokeWidth: 2, strokeLinecap: "round" }) }));
 const AGE_OPTIONS = [
     ...Array.from({ length: 12 }, (_, i) => ({
@@ -20,6 +21,8 @@ const AGE_OPTIONS = [
     { id: "80+", label: "80+" },
 ];
 const AgeSelector = ({ label, value, onChange, translations, }) => {
+    const { colors } = useWidget();
+    const inputBg = colors.input || Colors.inputBg;
     const insets = useSafeAreaInsets();
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [displayText, setDisplayText] = useState("");
@@ -40,7 +43,7 @@ const AgeSelector = ({ label, value, onChange, translations, }) => {
         const isActive = item.id === value;
         return (_jsxs(TouchableOpacity, { style: [styles.optionItem, isActive && styles.optionItemActive], onPress: () => handleSelect(item), activeOpacity: 0.7, children: [_jsx(Text, { style: [styles.optionText, isActive && styles.optionTextActive], children: item.label }), isActive && _jsx(Text, { style: styles.checkMark, children: "\u2713" })] }));
     };
-    return (_jsxs(View, { children: [_jsx(View, { style: styles.inputContainer, children: _jsxs(TouchableOpacity, { style: formStyles.inputTrigger, onPress: () => setIsModalOpen(true), activeOpacity: 0.7, children: [_jsx(Text, { style: formStyles.label, children: translations["age_selector_label"] || label }), _jsxs(View, { style: formStyles.inputTriggerRow, children: [_jsx(Text, { style: [
+    return (_jsxs(View, { children: [_jsx(View, { style: styles.inputContainer, children: _jsxs(TouchableOpacity, { style: [formStyles.inputTrigger, { backgroundColor: inputBg }], onPress: () => setIsModalOpen(true), activeOpacity: 0.7, children: [_jsx(Text, { style: formStyles.label, children: translations["age_selector_label"] || label }), _jsxs(View, { style: formStyles.inputTriggerRow, children: [_jsx(Text, { style: [
                                         formStyles.inputTriggerText,
                                         !displayText && formStyles.inputTriggerPlaceholder,
                                     ], children: displayText ||

package/dist/modules/search-form/NationalityInput.js

@@ -6,10 +6,11 @@ import Svg, { Circle, Path } from "react-native-svg";
 import { SvgUri } from "react-native-svg";
 import { useCountriesSearch } from "../hooks/useCountriesSearch";
 import { useCountriesByCodes } from "../hooks/useCountriesByCodes";
+import { useWidget } from "../../context/WidgetContext";
 import { Colors, Spacing, FontSize } from "../../theme/colors";
 import { CloseIcon } from "../../store";
 import { formStyles } from "../../theme/formStyles";
-const SearchIcon = () => (_jsxs(Svg, { width: 19, height: 18, viewBox: "0 0 19 18", fill: "none", children: [_jsx(Circle, { cx: 7, cy: 7, r: 6, stroke: Colors.primary, strokeWidth: 2 }), _jsx(Path, { d: "M12 11L17.2857 16.0902", stroke: Colors.primary, strokeWidth: 2, strokeLinecap: "round" })] }));
+const SearchIcon = ({ color = Colors.primary }) => (_jsxs(Svg, { width: 19, height: 18, viewBox: "0 0 19 18", fill: "none", children: [_jsx(Circle, { cx: 7, cy: 7, r: 6, stroke: color, strokeWidth: 2 }), _jsx(Path, { d: "M12 11L17.2857 16.0902", stroke: color, strokeWidth: 2, strokeLinecap: "round" })] }));
 const FLAG_BASE = "https://cdn.travel-code.com/images/remaster/flags";
 const POPULAR_FALLBACK = [
     { code: "PL", title: "\u041F\u043E\u043B\u044C\u0448\u0430", titleEn: "Poland", flag: `${FLAG_BASE}/PL.svg` },
@@ -19,6 +20,9 @@ const POPULAR_FALLBACK = [
     { code: "TR", title: "\u0422\u0443\u0440\u0446\u0438\u044F", titleEn: "Turkey", flag: `${FLAG_BASE}/TR.svg` },
 ];
 const NationalityInput = ({ label, value, onChange, translations, defaultNationality, defaultNationalities, lang = "ru", }) => {
+    const { colors } = useWidget();
+    const btnColor = colors.primary || Colors.primary;
+    const inputBg = colors.input || Colors.inputBg;
     const insets = useSafeAreaInsets();
     const [query, setQuery] = useState("");
     const [selectedCountry, setSelectedCountry] = useState(null);
@@ -78,10 +82,10 @@ const NationalityInput = ({ label, value, onChange, translations, defaultNationa
         const isActive = query.trim().toLowerCase() === countryLabel.toLowerCase();
         return (_jsxs(TouchableOpacity, { style: [styles.countryItem, isActive && styles.countryItemActive], onPress: () => handleSelect(item), activeOpacity: 0.7, children: [_jsx(View, { style: styles.flagContainer, children: _jsx(SvgUri, { uri: item.flag || `${FLAG_BASE}/${item.code}.svg`, width: 24, height: 18 }) }), _jsxs(View, { style: styles.countryInfo, children: [_jsx(Text, { style: styles.countryName, children: countryLabel }), _jsx(Text, { style: styles.countryCode, children: item.code })] })] }));
     };
-    return (_jsxs(View, { children: [_jsx(View, { style: styles.inputContainer, children: _jsxs(TouchableOpacity, { style: formStyles.inputTrigger, onPress: openModal, activeOpacity: 0.7, children: [_jsx(Text, { style: formStyles.label, children: label }), _jsxs(View, { style: formStyles.inputTriggerRow, children: [_jsx(Text, { style: [
+    return (_jsxs(View, { children: [_jsx(View, { style: styles.inputContainer, children: _jsxs(TouchableOpacity, { style: [formStyles.inputTrigger, { backgroundColor: inputBg }], onPress: openModal, activeOpacity: 0.7, children: [_jsx(Text, { style: formStyles.label, children: label }), _jsxs(View, { style: formStyles.inputTriggerRow, children: [_jsx(Text, { style: [
                                         formStyles.inputTriggerText,
                                         !query && formStyles.inputTriggerPlaceholder,
-                                    ], numberOfLines: 1, children: query || label }), selectedCountry?.code && (_jsx(Text, { style: formStyles.inputTriggerCode, children: selectedCountry.code }))] })] }) }), _jsx(Modal, { visible: isModalOpen, animationType: "slide", presentationStyle: "fullScreen", onRequestClose: () => setIsModalOpen(false), children: _jsxs(View, { style: [styles.modalContainer, { paddingTop: insets.top }], children: [_jsx(TouchableOpacity, { style: styles.closeButton, onPress: () => setIsModalOpen(false), hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsx(CloseIcon, { size: 16 }) }), _jsxs(View, { style: styles.searchHeader, children: [_jsx(SearchIcon, {}), _jsx(TextInput, { style: styles.searchInput, value: modalQuery, onChangeText: (val) => {
+                                    ], numberOfLines: 1, children: query || label }), selectedCountry?.code && (_jsx(Text, { style: formStyles.inputTriggerCode, children: selectedCountry.code }))] })] }) }), _jsx(Modal, { visible: isModalOpen, animationType: "slide", presentationStyle: "fullScreen", onRequestClose: () => setIsModalOpen(false), children: _jsxs(View, { style: [styles.modalContainer, { paddingTop: insets.top }], children: [_jsx(TouchableOpacity, { style: styles.closeButton, onPress: () => setIsModalOpen(false), hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsx(CloseIcon, { size: 16 }) }), _jsxs(View, { style: styles.searchHeader, children: [_jsx(SearchIcon, { color: btnColor }), _jsx(TextInput, { style: styles.searchInput, value: modalQuery, onChangeText: (val) => {
                                         setModalQuery(val);
                                         if (!val.trim()) {
                                             setSelectedCountry(null);

package/dist/modules/search-form/TimePicker.js

@@ -10,7 +10,8 @@ const TimePicker = ({ value, onChange, lang = "ru", translations, }) => {
     const [hours, setHours] = useState(10);
     const [minutes, setMinutes] = useState(0);
     const [period, setPeriod] = useState("AM");
-    const { dateTimeFormat } = useWidget();
+    const { dateTimeFormat, colors } = useWidget();
+    const inputBg = colors.input || Colors.inputBg;
     const to24h = (h12, p) => {
         if (p === "AM")
             return h12 === 12 ? 0 : h12;
@@ -95,8 +96,8 @@ const TimePicker = ({ value, onChange, lang = "ru", translations, }) => {
         setMinutes(m);
         applyTime(h, m);
     };
-    return (_jsxs(View, { children: [_jsxs(View, { style: styles.fieldsRow, children: [_jsx(View, { style: styles.fieldContainer, children: _jsxs(TouchableOpacity, { style: formStyles.inputTrigger, onPress: () => openPicker("from"), activeOpacity: 0.7, children: [_jsx(Text, { style: formStyles.label, children: translations.timepicker_pickup_label ||
-                                        (lang === "en" ? "Pick-up time" : "\u0412\u0440\u0435\u043C\u044F \u043F\u043E\u043B\u0443\u0447\u0435\u043D\u0438\u044F") }), _jsx(Text, { style: styles.fieldValue, children: formatInputTime(value[0]) })] }) }), _jsx(View, { style: styles.fieldContainer, children: _jsxs(TouchableOpacity, { style: formStyles.inputTrigger, onPress: () => openPicker("to"), activeOpacity: 0.7, children: [_jsx(Text, { style: formStyles.label, children: translations.timepicker_dropoff_label ||
+    return (_jsxs(View, { children: [_jsxs(View, { style: styles.fieldsRow, children: [_jsx(View, { style: styles.fieldContainer, children: _jsxs(TouchableOpacity, { style: [formStyles.inputTrigger, { backgroundColor: inputBg }], onPress: () => openPicker("from"), activeOpacity: 0.7, children: [_jsx(Text, { style: formStyles.label, children: translations.timepicker_pickup_label ||
+                                        (lang === "en" ? "Pick-up time" : "\u0412\u0440\u0435\u043C\u044F \u043F\u043E\u043B\u0443\u0447\u0435\u043D\u0438\u044F") }), _jsx(Text, { style: styles.fieldValue, children: formatInputTime(value[0]) })] }) }), _jsx(View, { style: styles.fieldContainer, children: _jsxs(TouchableOpacity, { style: [formStyles.inputTrigger, { backgroundColor: inputBg }], onPress: () => openPicker("to"), activeOpacity: 0.7, children: [_jsx(Text, { style: formStyles.label, children: translations.timepicker_dropoff_label ||
                                         (lang === "en" ? "Drop-off time" : "\u0412\u0440\u0435\u043C\u044F \u0432\u043E\u0437\u0432\u0440\u0430\u0442\u0430") }), _jsx(Text, { style: styles.fieldValue, children: formatInputTime(value[1]) })] }) })] }), _jsx(Modal, { visible: isOpen, transparent: true, animationType: "fade", onRequestClose: () => setIsOpen(false), children: _jsx(TouchableOpacity, { style: styles.overlay, activeOpacity: 1, onPress: () => setIsOpen(false), children: _jsxs(View, { style: styles.pickerContainer, onStartShouldSetResponder: () => true, children: [_jsxs(View, { style: styles.pickerContent, children: [_jsxs(View, { style: styles.timeColumn, children: [_jsx(TouchableOpacity, { style: styles.arrowButton, onPress: () => adjustHours(1), children: _jsx(Text, { style: styles.arrowText, children: "\u25B2" }) }), _jsx(Text, { style: styles.timeValue, children: String(hours).padStart(2, "0") }), _jsx(TouchableOpacity, { style: styles.arrowButton, onPress: () => adjustHours(-1), children: _jsx(Text, { style: styles.arrowText, children: "\u25BC" }) })] }), _jsx(Text, { style: styles.timeSeparator, children: ":" }), _jsxs(View, { style: styles.timeColumn, children: [_jsx(TouchableOpacity, { style: styles.arrowButton, onPress: () => adjustMinutes(15), children: _jsx(Text, { style: styles.arrowText, children: "\u25B2" }) }), _jsx(Text, { style: styles.timeValue, children: String(minutes).padStart(2, "0") }), _jsx(TouchableOpacity, { style: styles.arrowButton, onPress: () => adjustMinutes(-15), children: _jsx(Text, { style: styles.arrowText, children: "\u25BC" }) })] }), dateTimeFormat === "usa" && (_jsxs(_Fragment, { children: [_jsx(View, { style: styles.timeSeparatorSpace }), _jsxs(View, { style: styles.timeColumn, children: [_jsx(TouchableOpacity, { style: styles.arrowButton, onPress: () => {
                                                             const p = period === "AM" ? "PM" : "AM";
                                                             setPeriod(p);

package/dist/modules/search-form/flight/AirlinesSelector.js

@@ -4,6 +4,7 @@ import { View, Text, TextInput, TouchableOpacity, Modal, FlatList, StyleSheet, A
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import Svg, { Circle, Path } from "react-native-svg";
 import { useApiToken } from "../../../utils/getToken";
+import { useWidget } from "../../../context/WidgetContext";
 import { Colors, Spacing, BorderRadius, FontSize } from "../../../theme/colors";
 import { CloseIcon } from "../../../store";
 import { formStyles } from "../../../theme/formStyles";
@@ -16,8 +17,11 @@ const POPULAR_AIRLINES = [
     { id: 6, code: "W6", title: "Wizz Air" },
 ];
 const API_URL = "https://api.travel-code.com/v1/data/airlines";
-const SearchIcon = () => (_jsxs(Svg, { width: 19, height: 18, viewBox: "0 0 19 18", fill: "none", children: [_jsx(Circle, { cx: 7, cy: 7, r: 6, stroke: Colors.primary, strokeWidth: 2 }), _jsx(Path, { d: "M12 11L17.2857 16.0902", stroke: Colors.primary, strokeWidth: 2, strokeLinecap: "round" })] }));
+const SearchIcon = ({ color = Colors.primary }) => (_jsxs(Svg, { width: 19, height: 18, viewBox: "0 0 19 18", fill: "none", children: [_jsx(Circle, { cx: 7, cy: 7, r: 6, stroke: color, strokeWidth: 2 }), _jsx(Path, { d: "M12 11L17.2857 16.0902", stroke: color, strokeWidth: 2, strokeLinecap: "round" })] }));
 const AirlinesSelector = ({ value, onChange, translations, }) => {
+    const { colors } = useWidget();
+    const btnColor = colors.primary || Colors.primary;
+    const inputBg = colors.input || Colors.inputBg;
     const token = useApiToken();
     const insets = useSafeAreaInsets();
     const [query, setQuery] = useState("");
@@ -82,11 +86,11 @@ const AirlinesSelector = ({ value, onChange, translations, }) => {
                             isSelected && styles.checkboxSelected,
                         ], children: isSelected && _jsx(Text, { style: styles.checkmark, children: "\u2713" }) })] }) }));
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(TouchableOpacity, { style: formStyles.inputTrigger, onPress: () => setIsModalOpen(true), activeOpacity: 0.8, children: [_jsx(Text, { style: formStyles.label, children: translations["airlines_label"] || "Airlines" }), value.length > 0 ? (_jsx(View, { style: styles.chipsRow, children: value.map((code) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(TouchableOpacity, { style: [formStyles.inputTrigger, { backgroundColor: inputBg }], onPress: () => setIsModalOpen(true), activeOpacity: 0.8, children: [_jsx(Text, { style: formStyles.label, children: translations["airlines_label"] || "Airlines" }), value.length > 0 ? (_jsx(View, { style: styles.chipsRow, children: value.map((code) => {
                             const airline = POPULAR_AIRLINES.find((a) => a.code === code) ||
                                 airlines.find((a) => a.code === code);
                             return (_jsxs(View, { style: styles.chip, children: [_jsx(Text, { style: styles.chipText, children: airline?.title || code }), _jsx(TouchableOpacity, { onPress: () => toggleAirline(code), hitSlop: { top: 4, bottom: 4, left: 4, right: 4 }, children: _jsx(Text, { style: styles.chipRemove, children: "x" }) })] }, code));
-                        }) })) : (_jsx(Text, { style: formStyles.inputTriggerPlaceholder, children: translations["all_airlines_placeholder"] || "All airlines" }))] }), _jsx(Modal, { visible: isModalOpen, animationType: "slide", presentationStyle: "fullScreen", onRequestClose: () => setIsModalOpen(false), children: _jsxs(View, { style: [styles.modalContainer, { paddingTop: insets.top }], children: [_jsx(TouchableOpacity, { style: styles.closeButton, onPress: () => setIsModalOpen(false), hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsx(CloseIcon, { size: 16 }) }), _jsxs(View, { style: styles.searchHeader, children: [_jsx(SearchIcon, {}), _jsx(TextInput, { autoFocus: true, style: styles.searchInput, value: query, onChangeText: setQuery, placeholder: translations["airlines_popup_placeholder"] ||
+                        }) })) : (_jsx(Text, { style: formStyles.inputTriggerPlaceholder, children: translations["all_airlines_placeholder"] || "All airlines" }))] }), _jsx(Modal, { visible: isModalOpen, animationType: "slide", presentationStyle: "fullScreen", onRequestClose: () => setIsModalOpen(false), children: _jsxs(View, { style: [styles.modalContainer, { paddingTop: insets.top }], children: [_jsx(TouchableOpacity, { style: styles.closeButton, onPress: () => setIsModalOpen(false), hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsx(CloseIcon, { size: 16 }) }), _jsxs(View, { style: styles.searchHeader, children: [_jsx(SearchIcon, { color: btnColor }), _jsx(TextInput, { autoFocus: true, style: styles.searchInput, value: query, onChangeText: setQuery, placeholder: translations["airlines_popup_placeholder"] ||
                                         "Search airlines", placeholderTextColor: Colors.textTertiary, returnKeyType: "search" })] }), selectedAirlines.length > 0 && (_jsx(View, { style: styles.selectedChipsContainer, children: selectedAirlines.map((airline) => (_jsxs(View, { style: styles.chip, children: [_jsx(Text, { style: styles.chipText, children: airline.title }), _jsx(TouchableOpacity, { onPress: () => toggleAirline(airline.code), hitSlop: { top: 4, bottom: 4, left: 4, right: 4 }, children: _jsx(Text, { style: styles.chipRemove, children: "x" }) })] }, airline.code))) })), _jsxs(View, { style: styles.modalContent, children: [loading && (_jsxs(View, { style: styles.loadingContainer, children: [_jsx(ActivityIndicator, { size: "small", color: Colors.primary }), _jsx(Text, { style: styles.loadingText, children: translations["airlines_popup_loading"] || "Loading..." })] })), !loading &&
                                     !showPopular &&
                                     airlines.length === 0 &&

package/dist/modules/search-form/flight/DatePicker.js

@@ -14,7 +14,9 @@ const DAY_SIZE = Math.floor((SCREEN_WIDTH - Spacing.lg * 2) / 7);
 const ChevronLeft = ({ color = Colors.textTertiary }) => (_jsx(Svg, { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", children: _jsx(Path, { d: "M4 7.5 9.5 2l1.25 1.25L6 8l4.75 4.75L9.5 14 4 8.5z", fill: color }) }));
 const ChevronRight = ({ color = Colors.textTertiary }) => (_jsx(Svg, { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", children: _jsx(Path, { d: "M12 8.5 6.5 14l-1.25-1.25L10 8 5.25 3.25 6.5 2 12 7.5z", fill: color }) }));
 const DatePicker = ({ lang, value, onChange, minDate, maxDate, translations, mode = "flight", }) => {
-    const { dateTimeFormat } = useWidget();
+    const { dateTimeFormat, colors } = useWidget();
+    const btnColor = colors.primary || Colors.primary;
+    const inputBg = colors.input || Colors.inputBg;
     const insets = useSafeAreaInsets();
     const [isOpen, setIsOpen] = useState(false);
     const [currentMonth, setCurrentMonth] = useState(new Date());
@@ -162,6 +164,7 @@ const DatePicker = ({ lang, value, onChange, minDate, maxDate, translations, mod
                         return (_jsx(TouchableOpacity, { disabled: isDisabled, style: [
                                 styles.monthBtn,
                                 isActive && styles.monthBtnActive,
+                                isActive && { backgroundColor: btnColor, borderColor: btnColor },
                                 isDisabled && styles.monthBtnDisabled,
                             ], onPress: () => {
                                 if (isDisabled)
@@ -203,11 +206,13 @@ const DatePicker = ({ lang, value, onChange, minDate, maxDate, translations, mod
             dayCells.push(_jsx(TouchableOpacity, { disabled: !!isDisabled, style: [
                     styles.dayCell,
                     isInRange && !isSelectedStart && !isSelectedEnd && styles.dayInRange,
+                    isInRange && !isSelectedStart && !isSelectedEnd && { backgroundColor: btnColor + '1A' },
                     isSelectedStart && styles.daySelected,
                     isSelectedEnd && styles.daySelected,
                     isOneDay && styles.dayOneDay,
                     isSelectedStart && selectedEnd && styles.daySelectedStart,
                     isSelectedEnd && selectedStart && styles.daySelectedEnd,
+                    (isSelectedStart || isSelectedEnd || isOneDay) && { backgroundColor: btnColor },
                 ], onPress: () => !isDisabled && handleDateClick(cellDate), activeOpacity: 0.7, children: _jsx(Text, { style: [
                         styles.dayText,
                         isDisabled && styles.dayTextDisabled,
@@ -226,10 +231,14 @@ const DatePicker = ({ lang, value, onChange, minDate, maxDate, translations, mod
     };
     return (_jsxs(_Fragment, { children: [_jsxs(View, { style: styles.dateInputsWrapper, children: [_jsxs(View, { style: styles.dateInputsRow, children: [_jsxs(TouchableOpacity, { style: [
                                     styles.dateField,
+                                    { backgroundColor: inputBg },
                                     activeField === "departure" && styles.dateFieldActive,
+                                    activeField === "departure" && { backgroundColor: btnColor + '1A' },
                                 ], onPress: () => openPicker("departure"), activeOpacity: 0.8, children: [_jsx(Text, { style: formStyles.label, children: depLabelFinal }), _jsx(Text, { style: [styles.dateFieldValue, !value[0] && styles.dateFieldPlaceholder], children: value[0] ? formatDateDisplay(value[0]) : depPlaceholder })] }), _jsxs(TouchableOpacity, { style: [
                                     styles.dateField,
+                                    { backgroundColor: inputBg },
                                     activeField === "return" && styles.dateFieldActive,
+                                    activeField === "return" && { backgroundColor: btnColor + '1A' },
                                     !value[0] && styles.dateFieldDisabled,
                                     oneWay && styles.dateFieldSoftDisabled,
                                 ], onPress: () => openPicker("return"), activeOpacity: value[0] ? 0.8 : 1, children: [_jsx(Text, { style: formStyles.label, children: retLabelFinal }), _jsx(Text, { style: [
@@ -242,10 +251,12 @@ const DatePicker = ({ lang, value, onChange, minDate, maxDate, translations, mod
                                                 : retPlaceholder })] })] }), (value[0] || value[1]) && (_jsx(TouchableOpacity, { style: styles.clearButton, onPress: handleClear, hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsx(CloseIcon, {}) }))] }), _jsx(Modal, { visible: isOpen, animationType: "slide", presentationStyle: "fullScreen", onRequestClose: closePicker, children: _jsxs(View, { style: [styles.modalContainer, { paddingTop: insets.top }], children: [_jsx(TouchableOpacity, { style: styles.modalCloseButton, onPress: closePicker, hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsx(CloseIcon, { size: 16 }) }), _jsxs(View, { style: styles.modalDateInputs, children: [_jsxs(TouchableOpacity, { style: [
                                         styles.modalDateField,
                                         activeField === "departure" && styles.modalDateFieldActive,
+                                        activeField === "departure" && { borderColor: btnColor, backgroundColor: btnColor + '1A' },
                                     ], onPress: () => setActiveField("departure"), children: [_jsx(Text, { style: styles.modalDateFieldLabel, children: lang === "en" ? "Departure" : depLabelFinal }), _jsx(Text, { style: styles.modalDateFieldValue, children: value[0] ? formatMobileDisplay(value[0]) : (lang === "en" ? "Choose date" : "Choose") })] }), _jsxs(TouchableOpacity, { style: [
                                         styles.modalDateField,
                                         (oneWay || !value[0]) && styles.modalDateFieldDisabled,
                                         activeField === "return" && styles.modalDateFieldActive,
+                                        activeField === "return" && { borderColor: btnColor, backgroundColor: btnColor + '1A' },
                                     ], onPress: () => {
                                         if (oneWay || !value[0])
                                             return;
@@ -264,9 +275,10 @@ const DatePicker = ({ lang, value, onChange, minDate, maxDate, translations, mod
                                 : (_jsxs(_Fragment, { children: [_jsxs(View, { style: styles.navRow, children: [_jsx(TouchableOpacity, { disabled: isBefore(addMonths(currentMonth, -1), startOfMonth(today)), onPress: () => setCurrentMonth((prev) => startOfMonth(addMonths(prev, -1))), hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, style: [
                                                         styles.navButton,
                                                         isBefore(addMonths(currentMonth, -1), startOfMonth(today)) && styles.navButtonDisabled,
-                                                    ], children: _jsx(ChevronLeft, {}) }), _jsx(TouchableOpacity, { onPress: () => setCurrentMonth((prev) => startOfMonth(addMonths(prev, 1))), hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, style: styles.navButton, children: _jsx(ChevronRight, {}) })] }), renderCalendarContent()] })) }), mode === "flight" && (_jsx(View, { style: styles.onewayContainer, children: _jsx(TouchableOpacity, { style: [styles.onewayBtn, oneWay && styles.onewayBtnActive], onPress: toggleOneWay, activeOpacity: 0.7, children: _jsx(Text, { style: [
+                                                    ], children: _jsx(ChevronLeft, {}) }), _jsx(TouchableOpacity, { onPress: () => setCurrentMonth((prev) => startOfMonth(addMonths(prev, 1))), hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, style: styles.navButton, children: _jsx(ChevronRight, {}) })] }), renderCalendarContent()] })) }), mode === "flight" && (_jsx(View, { style: styles.onewayContainer, children: _jsx(TouchableOpacity, { style: [styles.onewayBtn, oneWay && styles.onewayBtnActive, oneWay && { backgroundColor: btnColor + '1A' }], onPress: toggleOneWay, activeOpacity: 0.7, children: _jsx(Text, { style: [
                                         styles.onewayBtnText,
                                         oneWay && styles.onewayBtnTextActive,
+                                        oneWay && { color: btnColor },
                                     ], children: onewayText }) }) }))] }) })] }));
 };
 const styles = StyleSheet.create({

package/dist/modules/search-form/flight/FlightSearchForm.js

@@ -13,6 +13,7 @@ import { Colors, Spacing, BorderRadius, FontSize } from "../../../theme/colors";
 import { formStyles } from "../../../theme/formStyles";
 const FlightSearchForm = ({ startSearch, loading, error, translations = {}, defaults = null, isPreview, expiration, hasSearched, }) => {
     const { lang, currency, config, colors } = useWidget();
+    const inputBg = colors.input || Colors.inputBg;
     const defaultFromLocation = config?.defaults?.flights?.from || "VNO";
     const defaultToLocation = config?.defaults?.flights?.to || "BCN";
     const today = new Date();
@@ -92,7 +93,7 @@ const FlightSearchForm = ({ startSearch, loading, error, translations = {}, defa
         setLocationFrom(from);
         setLocationTo(to);
     }, [config?.defaults?.flights]);
-    return (_jsxs(ScrollView, { style: local.container, showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", children: [_jsxs(View, { style: [formStyles.formCard, { backgroundColor: colors.form || Colors.surface }], children: [_jsxs(View, { children: [_jsxs(View, { style: local.locationCard, children: [_jsx(Text, { style: local.labelInner, children: translations["from_label_flight"] || "From" }), _jsx(LocationInput, { label: translations["from_label_flight"] || "From", value: locationFrom, onChange: (val) => {
+    return (_jsxs(ScrollView, { style: local.container, showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", children: [_jsxs(View, { style: [formStyles.formCard, { backgroundColor: colors.form || Colors.surface }], children: [_jsxs(View, { children: [_jsxs(View, { style: [local.locationCard, { backgroundColor: inputBg }], children: [_jsx(Text, { style: local.labelInner, children: translations["from_label_flight"] || "From" }), _jsx(LocationInput, { label: translations["from_label_flight"] || "From", value: locationFrom, onChange: (val) => {
                                             setLocationFrom(val);
                                             setUserEdited(true);
                                             if (formErrors.locationFrom)

package/dist/modules/search-form/flight/LocationInput.js

@@ -5,6 +5,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import Svg, { Circle, Path } from "react-native-svg";
 import { useAirportSearch } from "../../hooks/useAirportSearch";
 import { useApiToken } from "../../../utils/getToken";
+import { useWidget } from "../../../context/WidgetContext";
 import { Colors, Spacing, FontSize } from "../../../theme/colors";
 import { formStyles } from "../../../theme/formStyles";
 import { CloseIcon } from "../../../store";
@@ -51,8 +52,11 @@ const POPULAR_LOCATIONS = [
     },
 ];
 const API_URL = "https://api.travel-code.com/v1/data/airports";
-const SearchIcon = () => (_jsxs(Svg, { width: 19, height: 18, viewBox: "0 0 19 18", fill: "none", children: [_jsx(Circle, { cx: 7, cy: 7, r: 6, stroke: Colors.primary, strokeWidth: 2 }), _jsx(Path, { d: "M12 11L17.2857 16.0902", stroke: Colors.primary, strokeWidth: 2, strokeLinecap: "round" })] }));
+const SearchIcon = ({ color = Colors.primary }) => (_jsxs(Svg, { width: 19, height: 18, viewBox: "0 0 19 18", fill: "none", children: [_jsx(Circle, { cx: 7, cy: 7, r: 6, stroke: color, strokeWidth: 2 }), _jsx(Path, { d: "M12 11L17.2857 16.0902", stroke: color, strokeWidth: 2, strokeLinecap: "round" })] }));
 const LocationInput = ({ label, value, onChange, lang, translations, minimal = false, }) => {
+    const { colors } = useWidget();
+    const btnColor = colors.primary || Colors.primary;
+    const inputBg = colors.input || Colors.inputBg;
     const token = useApiToken();
     const insets = useSafeAreaInsets();
     const getLabel = (loc) => lang === "en" ? loc.titleEn || loc.title : loc.title;
@@ -182,7 +186,7 @@ const LocationInput = ({ label, value, onChange, lang, translations, minimal = f
                     minimal ? styles.minimalText : formStyles.inputTriggerText,
                     !query && formStyles.inputTriggerPlaceholder,
                 ], numberOfLines: 1, children: query || label }), savedValue.code ? (_jsx(Text, { style: formStyles.inputTriggerCode, children: savedValue.code })) : null] }));
-    return (_jsxs(_Fragment, { children: [minimal ? (_jsx(TouchableOpacity, { style: styles.minimalContainer, onPress: () => setIsPopupOpen(true), activeOpacity: 0.8, children: triggerContent })) : (_jsxs(TouchableOpacity, { style: formStyles.inputTrigger, onPress: () => setIsPopupOpen(true), activeOpacity: 0.8, children: [_jsx(Text, { style: formStyles.label, children: label }), triggerContent] })), _jsx(Modal, { visible: isPopupOpen, animationType: "slide", presentationStyle: "fullScreen", onRequestClose: handleClose, children: _jsxs(View, { style: [styles.modalContainer, { paddingTop: insets.top }], children: [_jsx(TouchableOpacity, { style: styles.closeButton, onPress: handleClose, hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsx(CloseIcon, { size: 16 }) }), _jsxs(View, { style: styles.searchHeader, children: [_jsx(SearchIcon, {}), _jsx(TextInput, { autoFocus: true, style: styles.searchInput, value: query, onChangeText: (text) => {
+    return (_jsxs(_Fragment, { children: [minimal ? (_jsx(TouchableOpacity, { style: styles.minimalContainer, onPress: () => setIsPopupOpen(true), activeOpacity: 0.8, children: triggerContent })) : (_jsxs(TouchableOpacity, { style: [formStyles.inputTrigger, { backgroundColor: inputBg }], onPress: () => setIsPopupOpen(true), activeOpacity: 0.8, children: [_jsx(Text, { style: formStyles.label, children: label }), triggerContent] })), _jsx(Modal, { visible: isPopupOpen, animationType: "slide", presentationStyle: "fullScreen", onRequestClose: handleClose, children: _jsxs(View, { style: [styles.modalContainer, { paddingTop: insets.top }], children: [_jsx(TouchableOpacity, { style: styles.closeButton, onPress: handleClose, hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsx(CloseIcon, { size: 16 }) }), _jsxs(View, { style: styles.searchHeader, children: [_jsx(SearchIcon, { color: btnColor }), _jsx(TextInput, { autoFocus: true, style: styles.searchInput, value: query, onChangeText: (text) => {
                                         setQuery(text);
                                         setAllowSearch(true);
                                     }, placeholder: translations["location_popup_placeholder"] ||

package/dist/modules/search-form/flight/PassengersPicker.js

@@ -3,6 +3,7 @@ import { useState } from "react";
 import { View, Text, TouchableOpacity, Modal, StyleSheet, ScrollView, } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import Svg, { Path } from "react-native-svg";
+import { useWidget } from "../../../context/WidgetContext";
 import { Colors, Spacing, BorderRadius, FontSize } from "../../../theme/colors";
 import { formStyles } from "../../../theme/formStyles";
 const MAX_COUNT = 10;
@@ -16,8 +17,10 @@ const CABIN_OPTIONS = [
     { value: "economy_premium", labelKey: "cabin_premium_label", fallback: "Premium Economy" },
     { value: "business", labelKey: "cabin_business_label", fallback: "Business" },
 ];
-const ChevronDown = () => (_jsx(Svg, { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", children: _jsx(Path, { d: "M5 8L10 12.5L15 8", stroke: Colors.primary, strokeWidth: 2, strokeLinecap: "round" }) }));
+const ChevronDown = ({ color = Colors.primary }) => (_jsx(Svg, { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", children: _jsx(Path, { d: "M5 8L10 12.5L15 8", stroke: color, strokeWidth: 2, strokeLinecap: "round" }) }));
 const PassengersPicker = ({ label, value, onChange, cabinClass, onCabinClassChange, translations, }) => {
+    const { colors } = useWidget();
+    const btnColor = colors.primary || Colors.primary;
     const [isModalOpen, setIsModalOpen] = useState(false);
     const insets = useSafeAreaInsets();
     const updateCount = (key, delta, min, max) => {
@@ -34,25 +37,27 @@ const PassengersPicker = ({ label, value, onChange, cabinClass, onCabinClassChan
         : cabinClass === "economy_premium"
             ? translations["cabin_premium"] || "Premium Economy"
             : translations["cabin_economy"] || "Economy";
-    return (_jsxs(_Fragment, { children: [_jsxs(TouchableOpacity, { style: formStyles.inputTrigger, onPress: () => setIsModalOpen(true), activeOpacity: 0.8, children: [_jsx(Text, { style: formStyles.label, children: labelFinal }), _jsxs(View, { style: formStyles.inputTriggerRow, children: [_jsxs(Text, { style: styles.triggerText, children: [_jsxs(Text, { style: styles.triggerCount, children: [total, " "] }), _jsxs(Text, { children: [labelText, ", "] }), _jsx(Text, { children: cabinLabel })] }), _jsx(ChevronDown, {})] })] }), _jsx(Modal, { visible: isModalOpen, animationType: "slide", presentationStyle: "fullScreen", onRequestClose: () => setIsModalOpen(false), children: _jsxs(View, { style: [styles.modalContainer, { paddingTop: insets.top }], children: [_jsxs(View, { style: styles.modalHeader, children: [_jsx(TouchableOpacity, { onPress: () => setIsModalOpen(false), hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsx(Svg, { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", children: _jsx(Path, { d: "M15 18L9 12L15 6", stroke: Colors.textSecondary, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsxs(View, { style: styles.modalHeaderInfo, children: [_jsx(Text, { style: styles.modalTitle, children: translations["passengers_popup_title"] || "Passengers & Class" }), _jsxs(Text, { style: styles.modalSubtitle, children: [total, " ", labelText, ", ", cabinLabel] })] })] }), _jsxs(ScrollView, { style: styles.modalContent, showsVerticalScrollIndicator: false, children: [_jsx(Text, { style: styles.sectionTitle, children: translations["passengers_label"] || "Passengers" }), PASSENGER_TYPES.map(({ key, labelKey, fallback, min }) => (_jsxs(View, { style: styles.counterRow, children: [_jsx(Text, { style: styles.counterLabel, children: translations[labelKey] || fallback }), _jsxs(View, { style: styles.counterControls, children: [_jsx(TouchableOpacity, { style: [
+    return (_jsxs(_Fragment, { children: [_jsxs(TouchableOpacity, { style: [formStyles.inputTrigger, { backgroundColor: colors.input || Colors.inputBg }], onPress: () => setIsModalOpen(true), activeOpacity: 0.8, children: [_jsx(Text, { style: formStyles.label, children: labelFinal }), _jsxs(View, { style: formStyles.inputTriggerRow, children: [_jsxs(Text, { style: styles.triggerText, children: [_jsxs(Text, { style: styles.triggerCount, children: [total, " "] }), _jsxs(Text, { children: [labelText, ", "] }), _jsx(Text, { children: cabinLabel })] }), _jsx(ChevronDown, { color: btnColor })] })] }), _jsx(Modal, { visible: isModalOpen, animationType: "slide", presentationStyle: "fullScreen", onRequestClose: () => setIsModalOpen(false), children: _jsxs(View, { style: [styles.modalContainer, { paddingTop: insets.top }], children: [_jsxs(View, { style: styles.modalHeader, children: [_jsx(TouchableOpacity, { onPress: () => setIsModalOpen(false), hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsx(Svg, { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", children: _jsx(Path, { d: "M15 18L9 12L15 6", stroke: Colors.textSecondary, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsxs(View, { style: styles.modalHeaderInfo, children: [_jsx(Text, { style: styles.modalTitle, children: translations["passengers_popup_title"] || "Passengers & Class" }), _jsxs(Text, { style: styles.modalSubtitle, children: [total, " ", labelText, ", ", cabinLabel] })] })] }), _jsxs(ScrollView, { style: styles.modalContent, showsVerticalScrollIndicator: false, children: [_jsx(Text, { style: styles.sectionTitle, children: translations["passengers_label"] || "Passengers" }), PASSENGER_TYPES.map(({ key, labelKey, fallback, min }) => (_jsxs(View, { style: styles.counterRow, children: [_jsx(Text, { style: styles.counterLabel, children: translations[labelKey] || fallback }), _jsxs(View, { style: styles.counterControls, children: [_jsx(TouchableOpacity, { style: [
                                                         styles.counterButton,
                                                         value[key] <= min && styles.counterButtonDisabled,
                                                     ], onPress: () => updateCount(key, -1, min, MAX_COUNT), disabled: value[key] <= min, activeOpacity: 0.7, children: _jsx(Text, { style: [
                                                             styles.counterButtonText,
+                                                            { color: btnColor },
                                                             value[key] <= min && styles.counterButtonTextDisabled,
                                                         ], children: "-" }) }), _jsx(Text, { style: styles.counterValue, children: value[key] }), _jsx(TouchableOpacity, { style: [
                                                         styles.counterButton,
                                                         value[key] >= MAX_COUNT && styles.counterButtonDisabled,
                                                     ], onPress: () => updateCount(key, 1, min, MAX_COUNT), disabled: value[key] >= MAX_COUNT, activeOpacity: 0.7, children: _jsx(Text, { style: [
                                                             styles.counterButtonText,
+                                                            { color: btnColor },
                                                             value[key] >= MAX_COUNT && styles.counterButtonTextDisabled,
                                                         ], children: "+" }) })] })] }, key))), _jsx(Text, { style: [styles.sectionTitle, { marginTop: Spacing.xxl }], children: translations["cabin_label"] || "Class" }), CABIN_OPTIONS.map((option) => {
                                     const isSelected = cabinClass === option.value;
-                                    return (_jsxs(TouchableOpacity, { style: styles.radioRow, onPress: () => onCabinClassChange(option.value), activeOpacity: 0.7, children: [_jsx(View, { style: [styles.radio, isSelected && styles.radioSelected], children: isSelected && _jsx(View, { style: styles.radioInner }) }), _jsx(Text, { style: [
+                                    return (_jsxs(TouchableOpacity, { style: styles.radioRow, onPress: () => onCabinClassChange(option.value), activeOpacity: 0.7, children: [_jsx(View, { style: [styles.radio, isSelected && styles.radioSelected, isSelected && { borderColor: btnColor }], children: isSelected && _jsx(View, { style: [styles.radioInner, { backgroundColor: btnColor }] }) }), _jsx(Text, { style: [
                                                     styles.radioLabel,
                                                     isSelected && styles.radioLabelSelected,
                                                 ], children: translations[option.labelKey] || option.fallback })] }, option.value));
-                                })] }), _jsx(View, { style: styles.modalFooter, children: _jsx(TouchableOpacity, { style: styles.saveButton, onPress: () => setIsModalOpen(false), activeOpacity: 0.8, children: _jsx(Text, { style: styles.saveButtonText, children: translations["save_button"] || "Save" }) }) })] }) })] }));
+                                })] }), _jsx(View, { style: styles.modalFooter, children: _jsx(TouchableOpacity, { style: [styles.saveButton, { backgroundColor: btnColor }], onPress: () => setIsModalOpen(false), activeOpacity: 0.8, children: _jsx(Text, { style: styles.saveButtonText, children: translations["save_button"] || "Save" }) }) })] }) })] }));
 };
 const styles = StyleSheet.create({
     triggerText: {

package/dist/modules/search-form/flight/SwitchLocationBtn.js

@@ -2,8 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { TouchableOpacity, StyleSheet, Animated, Easing, } from "react-native";
 import Svg, { Path } from "react-native-svg";
+import { useWidget } from "../../../context/WidgetContext";
 import { Colors, BorderRadius } from "../../../theme/colors";
 const SwitchLocationBtn = ({ from, to, setFrom, setTo, }) => {
+    const { colors } = useWidget();
+    const btnColor = colors.primary || Colors.primary;
     const rotation = useRef(new Animated.Value(0)).current;
     const handleSwitch = () => {
         const prevFrom = from;
@@ -25,7 +28,7 @@ const SwitchLocationBtn = ({ from, to, setFrom, setTo, }) => {
     return (_jsx(Animated.View, { style: [
             styles.container,
             { transform: [{ rotate: rotateInterpolate }] },
-        ], children: _jsx(TouchableOpacity, { onPress: handleSwitch, style: styles.button, activeOpacity: 0.7, hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsxs(Svg, { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", children: [_jsx(Path, { opacity: 0.3, d: "M13.3334 14.1667C13.7937 14.1667 14.1667 13.7936 14.1667 13.3333C14.1667 12.8731 13.7937 12.5 13.3334 12.5L5.00008 12.5C4.53984 12.5 4.16675 12.8731 4.16675 13.3333C4.16675 13.7936 4.53984 14.1667 5.00008 14.1667L13.3334 14.1667Z", fill: Colors.primary }), _jsx(Path, { d: "M11.9108 11.4224C11.5854 11.097 11.5854 10.5694 11.9108 10.2439C12.2363 9.91848 12.7639 9.91848 13.0893 10.2439L15.5893 12.7439C15.9148 13.0694 15.9148 13.597 15.5893 13.9224L13.0893 16.4224C12.7639 16.7479 12.2363 16.7479 11.9108 16.4224C11.5854 16.097 11.5854 15.5694 11.9108 15.2439L13.8216 13.3332L11.9108 11.4224Z", fill: Colors.primary }), _jsx(Path, { opacity: 0.3, d: "M6.66659 7.50016C6.20635 7.50016 5.83325 7.12707 5.83325 6.66683C5.83325 6.20659 6.20635 5.8335 6.66659 5.8335L14.9999 5.8335C15.4602 5.8335 15.8333 6.20659 15.8333 6.66683C15.8333 7.12707 15.4602 7.50016 14.9999 7.50016L6.66659 7.50016Z", fill: Colors.primary }), _jsx(Path, { d: "M8.08917 4.75592C8.41461 4.43049 8.41461 3.90285 8.08917 3.57741C7.76374 3.25197 7.2361 3.25197 6.91066 3.57741L4.41066 6.07741C4.08523 6.40285 4.08523 6.93049 4.41066 7.25592L6.91066 9.75592C7.2361 10.0814 7.76374 10.0814 8.08917 9.75592C8.41461 9.43049 8.41461 8.90285 8.08917 8.57741L6.17843 6.66667L8.08917 4.75592Z", fill: Colors.primary })] }) }) }));
+        ], children: _jsx(TouchableOpacity, { onPress: handleSwitch, style: styles.button, activeOpacity: 0.7, hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsxs(Svg, { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", children: [_jsx(Path, { opacity: 0.3, d: "M13.3334 14.1667C13.7937 14.1667 14.1667 13.7936 14.1667 13.3333C14.1667 12.8731 13.7937 12.5 13.3334 12.5L5.00008 12.5C4.53984 12.5 4.16675 12.8731 4.16675 13.3333C4.16675 13.7936 4.53984 14.1667 5.00008 14.1667L13.3334 14.1667Z", fill: btnColor }), _jsx(Path, { d: "M11.9108 11.4224C11.5854 11.097 11.5854 10.5694 11.9108 10.2439C12.2363 9.91848 12.7639 9.91848 13.0893 10.2439L15.5893 12.7439C15.9148 13.0694 15.9148 13.597 15.5893 13.9224L13.0893 16.4224C12.7639 16.7479 12.2363 16.7479 11.9108 16.4224C11.5854 16.097 11.5854 15.5694 11.9108 15.2439L13.8216 13.3332L11.9108 11.4224Z", fill: btnColor }), _jsx(Path, { opacity: 0.3, d: "M6.66659 7.50016C6.20635 7.50016 5.83325 7.12707 5.83325 6.66683C5.83325 6.20659 6.20635 5.8335 6.66659 5.8335L14.9999 5.8335C15.4602 5.8335 15.8333 6.20659 15.8333 6.66683C15.8333 7.12707 15.4602 7.50016 14.9999 7.50016L6.66659 7.50016Z", fill: btnColor }), _jsx(Path, { d: "M8.08917 4.75592C8.41461 4.43049 8.41461 3.90285 8.08917 3.57741C7.76374 3.25197 7.2361 3.25197 6.91066 3.57741L4.41066 6.07741C4.08523 6.40285 4.08523 6.93049 4.41066 7.25592L6.91066 9.75592C7.2361 10.0814 7.76374 10.0814 8.08917 9.75592C8.41461 9.43049 8.41461 8.90285 8.08917 8.57741L6.17843 6.66667L8.08917 4.75592Z", fill: btnColor })] }) }) }));
 };
 const styles = StyleSheet.create({
     container: {

package/dist/modules/search-form/flight/flight-filters/FiltersContent.d.ts

@@ -16,6 +16,7 @@ type FiltersContentProps = {
     maxDayMinutes: number;
     onRangeDragStart?: () => void;
     onRangeDragEnd?: () => void;
+    accentColor?: string;
 };
 declare const FiltersContent: React.FC<FiltersContentProps>;
 export default FiltersContent;