kupos-ui-components-lib 10.4.65 → 10.4.66

package/dist/ServiceItemPb.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ServiceItemProps } from "./types";
+declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, t, }: ServiceItemProps): React.ReactElement;
+export default ServiceItemPB;

package/dist/ServiceItemPb.js

@@ -0,0 +1,486 @@
+import React from "react";
+import LottiePlayer from "./assets/LottiePlayer";
+import DateService from "./utils/DateService";
+import ModalEventManager from "./utils/ModalEventManager";
+import InternationalServicePopupBody from "./components/InternationalServicePopupBody";
+const SEAT_EXCEPTIONS = ["Asiento mascota"];
+function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, t = (key) => key, }) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const SvgAmenities = ({ moreAnemities, name, color, }) => {
+        const amenityKey = name.toLowerCase().replace(/\s/g, "_");
+        const getIconPath = () => {
+            const amenityFileName = `${amenityKey}.png`;
+            const imagePath = getAmenitiesImage(amenityFileName);
+            if (!imagePath) {
+                return `/public/images/amenities/${amenityKey}.svg`;
+            }
+            return imagePath;
+        };
+        const iconPath = getIconPath();
+        return (React.createElement("img", { src: iconPath, alt: name, style: {
+                filter: color === "white" ? "brightness(0) invert(1)" : "",
+            }, className: `object-contain ${moreAnemities ? "w-[20px] h-[20px]" : "w-[16px] h-[16px]"}` }));
+    };
+    const getAmenitiesImage = (name) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        switch (name) {
+            case "air_condtion.png": {
+                return (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _a === void 0 ? void 0 : _a.airConditionIcon;
+            }
+            case "baggage.png": {
+                return (_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _b === void 0 ? void 0 : _b.baggageIcon;
+            }
+            case "charging_plug.png": {
+                return (_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _c === void 0 ? void 0 : _c.chargingIcon;
+            }
+            case "coffee.png": {
+                return (_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _d === void 0 ? void 0 : _d.coffeeIcon;
+            }
+            case "food_new_icon.png": {
+                return (_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _e === void 0 ? void 0 : _e.foodIcon;
+            }
+            case "gaming.png": {
+                return (_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _f === void 0 ? void 0 : _f.gamingIcon;
+            }
+            case "handicap.png": {
+                return (_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _g === void 0 ? void 0 : _g.handicapIcon;
+            }
+            case "mobile_ticket.png": {
+                return (_h = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _h === void 0 ? void 0 : _h.mobileTicketIcon;
+            }
+            case "movie.png": {
+                return (_j = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _j === void 0 ? void 0 : _j.movieIcon;
+            }
+            case "restrooms.png": {
+                return (_k = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _k === void 0 ? void 0 : _k.restroomsIcon;
+            }
+            case "snacks_new.png": {
+                return (_l = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _l === void 0 ? void 0 : _l.snackIcon;
+            }
+            case "wifi.png": {
+                return (_m = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _m === void 0 ? void 0 : _m.wifiIcon;
+            }
+            case "cortina_divisoria.png": {
+                return (_o = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _o === void 0 ? void 0 : _o.cortinaIcon;
+            }
+            case "frazada.png": {
+                return (_p = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _p === void 0 ? void 0 : _p.frazaIcon;
+            }
+            default: {
+                return "";
+            }
+        }
+    };
+    const getAmenityName = (rawAmenity) => {
+        switch (rawAmenity) {
+            case "mobile ticket":
+                return "Ticket móvil";
+            case "charging plug":
+                return "Cargador";
+            case "wifi":
+                return "WiFi";
+            case "movie":
+                return "Entretenimiento";
+            case "baggage":
+                return "Equipaje";
+            case "Restrooms":
+                return "Baños";
+            case "air condtion":
+                return "Aire acondicionado";
+            case "snacks new":
+                return "Snacks";
+            case "coffee":
+                return "Café";
+            case "cortina divisoria":
+                return "Cortina Divisoria";
+            case "frazada":
+                return "";
+            default:
+                return rawAmenity;
+        }
+    };
+    const currency = (amount) => {
+        const formattedAmount = amount
+            .toString()
+            .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        return "$" + formattedAmount;
+    };
+    const labelId = typeof serviceItem.boarding_stages === "string"
+        ? serviceItem.boarding_stages.split("|")[0]
+        : "";
+    const showTopLabel = busStage &&
+        busStage[labelId] &&
+        busStage[labelId].split("|")[1] === "true" &&
+        busStage[labelId].split("|")[0];
+    const renderStages = (stageData) => {
+        if (typeof stageData === "string") {
+            return (React.createElement("div", { className: "flex flex-col space-y-1 text-justify gap-[4px]" }, stageData.split(",").map((stageInfo, index) => {
+                const parts = stageInfo.split("|");
+                const id = parts[0];
+                const time = parts[1];
+                const label = parts[3] || ""; // Skip empty part [2]
+                return (React.createElement("div", { key: index },
+                    label,
+                    " | ",
+                    time));
+            })));
+        }
+        return null;
+    };
+    let isSoldOut = serviceItem.available_seats <= 0;
+    const renderIcon = (iconKey, size = "14px") => {
+        var _a;
+        const iconValue = (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a[iconKey];
+        if (iconValue) {
+            if (typeof iconValue === "string") {
+                return (React.createElement("img", { src: iconValue, alt: iconKey, className: `${`w-[${size}] h-[${size}]`} mr-[5px]` }));
+            }
+        }
+        return null;
+    };
+    const getSortedSeatTypes = () => {
+        var _a;
+        if (!((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.seat_types) === null || _a === void 0 ? void 0 : _a.length)) {
+            return [{ label: "Salon cama", price: 0 }];
+        }
+        let seatTypesWithPrices = serviceItem.seat_types
+            .filter((item) => getFilteredSeats(item))
+            .map((val) => ({
+            label: val === null || val === void 0 ? void 0 : val.label,
+            price: val === null || val === void 0 ? void 0 : val.fare,
+        }));
+        seatTypesWithPrices.sort((a, b) => a.price - b.price);
+        const premiumIndex = seatTypesWithPrices.findIndex((item) => item.label === "Premium");
+        if (premiumIndex >= 3) {
+            seatTypesWithPrices[2] = seatTypesWithPrices[premiumIndex];
+        }
+        seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
+        return seatTypesWithPrices;
+    };
+    const getNumberOfSeats = () => {
+        return serviceItem.seat_types.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
+    };
+    const getSeatNames = () => {
+        const sortedSeatTypes = getSortedSeatTypes();
+        return sortedSeatTypes.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("span", { key: key, className: `flex items-center justify-between  text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` }, typeof val.label === "string" || typeof val.label === "number"
+            ? val.label
+            : null)));
+    };
+    const getSeatPrice = () => {
+        const sortedSeatTypes = getSortedSeatTypes();
+        return sortedSeatTypes.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("span", { key: key, className: "flex items-center justify-between text-[13.33px]" }, typeof val.price === "string"
+            ? currency(val.price)
+            : typeof val.price === "number"
+                ? currency(val.price)
+                : null)));
+    };
+    const getFilteredSeats = (item) => {
+        return item;
+    };
+    const checkMidnight = () => {
+        var _a, _b;
+        if ((cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label) &&
+            (cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label) &&
+            ((cityOrigin.label.toLowerCase().includes("argentina") &&
+                !cityDestination.label.toLowerCase().includes("argentina")) ||
+                (!cityOrigin.label.toLowerCase().includes("argentina") &&
+                    cityDestination.label.toLowerCase().includes("argentina")))) {
+            ModalEventManager.showPopup({
+                modalIcon: (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _a === void 0 ? void 0 : _a.warningIcon,
+                title: translation === null || translation === void 0 ? void 0 : translation.title,
+                showPrimaryButton: false,
+                primaryButtonText: translation === null || translation === void 0 ? void 0 : translation.continueButton,
+                onSecondaryButtonClick: () => {
+                    onBookButtonPress && onBookButtonPress();
+                },
+                secondaryButtonText: translation === null || translation === void 0 ? void 0 : translation.okContinueButton,
+                primaryButtonBgColor: colors === null || colors === void 0 ? void 0 : colors.kuposButtonColor,
+                primaryButtonTextColor: colors === null || colors === void 0 ? void 0 : colors.primaryButtonTextColor,
+                secondaryButtonBgColor: colors === null || colors === void 0 ? void 0 : colors.secondaryBgColor,
+                secondaryButtonTextColor: colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor,
+                children: React.createElement(InternationalServicePopupBody, null),
+            });
+            return;
+        }
+        if (serviceItem.dep_validation_text) {
+            ModalEventManager.showPopup({
+                body: serviceItem.dep_validation_text,
+                primaryButtonText: translation === null || translation === void 0 ? void 0 : translation.continueButton,
+                secondaryButtonText: translation === null || translation === void 0 ? void 0 : translation.chooseAnotherTripButton,
+                onPrimaryButtonClick: () => {
+                    onBookButtonPress && onBookButtonPress();
+                },
+                primaryButtonBgColor: colors === null || colors === void 0 ? void 0 : colors.kuposButtonColor,
+                primaryButtonTextColor: colors === null || colors === void 0 ? void 0 : colors.primaryButtonTextColor,
+                secondaryButtonBgColor: colors === null || colors === void 0 ? void 0 : colors.secondaryBgColor,
+                secondaryButtonTextColor: colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor,
+            });
+            return;
+        }
+        if (serviceItem.operator_service_name === "Classe Reale " &&
+            cityOrigin.label.toLowerCase() === "santiago,chile" &&
+            cityDestination.label.toLowerCase() === "portillo,chile") {
+            ModalEventManager.showPopup({
+                modalIcon: (_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _b === void 0 ? void 0 : _b.warningIcon,
+                title: translation === null || translation === void 0 ? void 0 : translation.title,
+                primaryButtonText: translation === null || translation === void 0 ? void 0 : translation.okContinueButton,
+                secondaryButtonText: translation === null || translation === void 0 ? void 0 : translation.chooseAnotherTripButton,
+                onPrimaryButtonClick: () => {
+                    onBookButtonPress && onBookButtonPress();
+                },
+                showSecondaryButton: false,
+                primaryButtonBgColor: colors === null || colors === void 0 ? void 0 : colors.kuposButtonColor,
+                primaryButtonTextColor: colors === null || colors === void 0 ? void 0 : colors.primaryButtonTextColor,
+                children: (React.createElement(React.Fragment, null,
+                    React.createElement("p", { className: "mt-[5px] text-justify" },
+                        translation.classeNormalText,
+                        React.createElement("span", { className: "bold-text" },
+                            "\u00A0",
+                            translation.classeBoldText),
+                        translation.classeNormalText1),
+                    React.createElement("p", { className: "mt-[10px] text-justify" },
+                        translation.classeNormalText2,
+                        "\u00A0",
+                        React.createElement("span", { className: "bold-text" },
+                            "\u00A0",
+                            translation.classeBoldText1),
+                        " ",
+                        translation.classeNormalText3))),
+            });
+            return;
+        }
+        else {
+            onBookButtonPressHandler();
+        }
+    };
+    const onBookButtonPressHandler = () => {
+        onBookButtonPress();
+    };
+    return (React.createElement("div", { className: `relative ${serviceItem.offer_text || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip)
+            ? "mb-[60px]"
+            : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
+            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
+            showTopLabel
+            ? "mt-[30px]"
+            : "mt-[20px]"}	` },
+        React.createElement("div", { className: "bg-white rounded-[20px] shadow-service mb-[10px] mx-auto relative" },
+            React.createElement("div", { className: "p-[15px]" },
+                React.createElement("div", { className: "flex justify-between items-center mb-[15px]" },
+                    React.createElement("div", { className: "w-[120px] overflow-y-hidden" },
+                        React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `w-[120px] h-auto object-contain ${isSoldOut ? "grayscale" : ""}` }))),
+                React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:minmax(0,1.4fr)_minmax(0,0.2fr)_minmax(0,1fr)_auto] gap-x-[7rem] min-[640px]:gap-x-[6rem] min-[768px]:gap-x-[4rem] min-[1024px]:gap-x-[4rem] min-[1280px]:gap-x-[4rem] min-[1380px]:gap-x-[5rem]" },
+                    React.createElement("div", { className: "min-h-[2.5rem] flex flex-col justify-between gap-[10px]" },
+                        React.createElement("div", { className: `flex items-center text-[13.33px] justify-between  ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
+                            React.createElement("div", { className: "flex items-center bold-text capitalize group " },
+                                orignLabel ? (React.createElement("div", { className: "w-[60px]" }, orignLabel)) : (React.createElement("div", { className: "w-[18px] h-auto mr-[8px]" },
+                                    React.createElement("img", { src: (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.origin, alt: "origin", className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` }))),
+                                React.createElement("span", { className: "cursor-pointer bold-text" }, DateService.getServiceItemDate(serviceItem.travel_date)),
+                                serviceItem.boarding_stages && (React.createElement("div", { className: "hidden group-hover:block absolute top-[29%] left-[35%] ml-2 text-white px-3 py-2 rounded-[10px] whitespace-normal z-10 shadow-service  ", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
+                                    React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 border-t-8 border-b-8 border-r-8 border-t-transparent border-b-transparent", style: { borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } }),
+                                    React.createElement("div", { className: "text-center text-[14px]" }, renderStages(serviceItem.boarding_stages))))),
+                            React.createElement("div", { className: "mx-[8px]" }, "\u2022"),
+                            React.createElement("div", { className: "font-[900] relative" }, DateService.formatTime(serviceItem.dep_time))),
+                        React.createElement("div", { className: `flex items-center text-[13.33px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
+                            React.createElement("div", { className: "flex items-center bold-text capitalize group " },
+                                destinationLabel ? (React.createElement("div", { className: "w-[60px]" }, destinationLabel)) : (React.createElement("div", { className: "w-[18px] h-auto mr-[8px]" },
+                                    React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.destination, className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` }))),
+                                React.createElement("span", { className: "cursor-pointer bold-text" }, DateService.getServiceItemDate(serviceItem.arrival_date)),
+                                serviceItem.dropoff_stages && (React.createElement("div", { className: `hidden group-hover:block absolute top-[46%] left-[35%] ml-2 text-white px-3 py-2 rounded-[10px] whitespace-normal z-10 shadow-service`, style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
+                                    React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 border-t-8 border-b-8 border-r-8 border-t-transparent border-b-transparent", style: { borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } }),
+                                    React.createElement("div", { className: "text-center text-[14px]" }, renderStages(serviceItem.dropoff_stages))))),
+                            React.createElement("div", { className: "mx-[8px]" }, "\u2022"),
+                            React.createElement("div", { className: "font-[900]" }, DateService.formatTime(serviceItem.arr_time)))),
+                    React.createElement("div", { style: {
+                            width: "1px",
+                            height: "2.5rem",
+                            backgroundColor: "#ccc",
+                            margin: "auto",
+                        } }),
+                    React.createElement("div", { className: "content-center" },
+                        React.createElement("div", { className: `flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${getNumberOfSeats() < 3 ? "" : ""}`, style: getNumberOfSeats() < 2 ? { alignItems: "center" } : {} },
+                            React.createElement("div", { className: "flex flex-col justify-between" }, getSeatNames()),
+                            React.createElement("div", { className: "flex flex-col justify-between", 
+                                // className={`flex flex-col ${
+                                //   getNumberOfSeats() < 3 ? "justify-between" : ""
+                                // }`}
+                                style: { color: isSoldOut ? "#c0c0c0" : colors.priceColor } }, getSeatPrice()))),
+                    React.createElement("div", null,
+                        React.createElement("button", { onClick: () => (!isSoldOut ? checkMidnight() : null), disabled: serviceDetailsLoading, className: `w-full  ${serviceDetailsLoading || isSoldOut ? "py-[6px]" : "py-[12px]"} text-[13.33px] font-bold text-white rounded-[10px] border-none px-[20px] flex items-center justify-center`, style: {
+                                backgroundColor: serviceDetailsLoading || isSoldOut
+                                    ? "lightgray"
+                                    : colors.kuposButtonColor,
+                                cursor: serviceDetailsLoading || isSoldOut
+                                    ? "not-allowed"
+                                    : "pointer",
+                            } },
+                            React.createElement("span", { className: "min-w-[75px] flex justify-center items-center bold-text" },
+                                isSoldOut ? renderIcon("soldOutIcon", "14px") : null,
+                                serviceDetailsLoading ? (React.createElement("span", { className: "loader-circle" })) : !isSoldOut ? (translation === null || translation === void 0 ? void 0 : translation.buyButton) : (translation === null || translation === void 0 ? void 0 : translation.soldOutButton))))),
+                React.createElement("div", { className: "flex justify-end mr-[11px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
+                    (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px] text-[red] mt-1 text-center" }, "\u00A1 \u00DAltimos Asientos!"))),
+                React.createElement("div", { 
+                    // className={`${
+                    //   serviceItem.is_change_ticket &&
+                    //   serviceItem.pet_seat_info &&
+                    //   serviceItem?.is_tracking_enabled &&
+                    //   Object.keys(serviceItem.pet_seat_info || {}).length > 0
+                    //     ? "grid grid-cols-[1.4fr_4.8fr] gap-[3.4rem] mt-[15px] text-[13px] items-center border-t border-[#eee] mt-[15px] pt-[12px]"
+                    //     : "grid grid-cols-[3.17fr_4.8fr] gap-[3rem] mt-[15px] text-[13px] items-center border-t border-[#eee] mt-[15px] pt-[12px]"
+                    // }`}
+                    className: `${"flex justify-between items-center mt-[15px] items-center border-t border-[#eee] mt-[15px] pt-[12px]"}` },
+                    React.createElement("div", null,
+                        React.createElement("div", { className: "flex items-center " },
+                            React.createElement("div", { className: "flex items-center cursor-pointer ", style: { color: isSoldOut ? "#c0c0c0" : "" } },
+                                React.createElement("div", { className: "flex items-center" },
+                                    React.createElement("div", { className: "w-[18px] h-auto mr-[4px] relative" },
+                                        React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[16px] h-[16px] mr-[4px] object-contain mb-[4px] ${isSoldOut ? "grayscale" : ""}`, onMouseEnter: (e) => {
+                                                const tooltip = e.currentTarget
+                                                    .nextElementSibling;
+                                                if (tooltip)
+                                                    tooltip.style.display = "block";
+                                            }, onMouseLeave: (e) => {
+                                                const tooltip = e.currentTarget
+                                                    .nextElementSibling;
+                                                if (tooltip)
+                                                    tooltip.style.display = "none";
+                                            } }),
+                                        React.createElement("div", { className: "hidden group-hover:block absolute left-[80px] -bottom-[160px] z-20 mt-2 w-[280px] rounded-lg shadow-service-2 bg-white overflow-hidden  rounded-[14px] border-[2px]", style: {
+                                                borderColor: colors.ratingBorderColor,
+                                                color: isSoldOut ? "#c0c0c0" : "",
+                                            } },
+                                            React.createElement("div", { className: "pt-[20px] text-center" },
+                                                React.createElement("div", { className: "text-[12px] bold-text text-[#464647]" }, "PUNTUACI\u00D3N"),
+                                                React.createElement("div", { className: "text-[12px] font-light text-[#464647]" }, serviceItem.operator_service_name)),
+                                            React.createElement("div", { className: "px-3 py-2 flex flex-col gap-[10px]" }, [
+                                                { key: "1", label: "Calidad del bus" },
+                                                { key: "2", label: "Puntualidad" },
+                                                {
+                                                    key: "3",
+                                                    label: "Calidad del servicio",
+                                                },
+                                                {
+                                                    key: "4",
+                                                    label: "Recomendación del servicio",
+                                                },
+                                            ].map((rating, index, array) => {
+                                                const isLast = index === array.length - 1;
+                                                // Use operator_details[6] for rating values
+                                                const ratingData = serviceItem.operator_details[6] || {};
+                                                const value = (ratingData === null || ratingData === void 0 ? void 0 : ratingData[rating.key]) || 0;
+                                                return (React.createElement("div", { key: rating.key, className: `flex items-center ${isLast ? "mb-2" : ""}` },
+                                                    React.createElement("div", { className: "relative w-[3rem] h-[3rem]" },
+                                                        React.createElement("div", { className: "absolute inset-0 w-full h-full rounded-full" },
+                                                            React.createElement("div", { className: "w-full h-full rounded-full border-[2px] border-[lightgray]" })),
+                                                        React.createElement("div", { className: "absolute inset-0 w-full h-full" },
+                                                            React.createElement("svg", { className: "w-full h-full", viewBox: "0 0 100 100" },
+                                                                React.createElement("circle", { cx: "50", cy: "50", r: "48", fill: "none", strokeWidth: "4", stroke: value >= 4
+                                                                        ? "#00A650"
+                                                                        : colors.ratingBorderColor, strokeDasharray: value > 0
+                                                                        ? `${value * 75.4} 301.6`
+                                                                        : "150.8 301.6", strokeDashoffset: "75.4", transform: "rotate(-90, 50, 50)" }))),
+                                                        React.createElement("div", { className: "absolute inset-0 flex items-center justify-center top-[40%] left-[36%]" },
+                                                            React.createElement("span", { className: "text-[#464647] font-medium text-[12px] " }, value.toFixed(1)))),
+                                                    React.createElement("span", { className: "text-[#464647] text-[13.33px] ml-[10px]" }, rating.label)));
+                                            })),
+                                            React.createElement("div", { className: "px-1 py-2 text-center text-[12px] text-[#ff8f45]", style: { backgroundColor: colors.ratingBottomColor } },
+                                                "Esta puntuaci\u00F3n se obtuvo de las opiniones de",
+                                                " ",
+                                                serviceItem.operator_details[5] || 0,
+                                                " usuarios."))),
+                                    React.createElement("span", { className: "text-[#464647] bold-text text-[13.33px]" }, typeof serviceItem.operator_details[1] === "number"
+                                        ? serviceItem.operator_details[1].toFixed(1)
+                                        : serviceItem.operator_details[1])),
+                                React.createElement("span", { className: "ml-[10px] text-[#464647] text-[13.33px]" }, serviceItem.operator_details[2])))),
+                    React.createElement("div", { className: "flex items-baseline relative text-[#464647]" },
+                        React.createElement("div", { className: `w-[18px] h-auto mr-[4px] ${isSoldOut ? "grayscale" : ""}` }, renderIcon("hours", "14px")),
+                        React.createElement("div", { className: `cursor-default group text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
+                            serviceItem.duration,
+                            " ",
+                            translation.hours,
+                            React.createElement("div", { className: " hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service", style: { backgroundColor: colors.tooltipColor } },
+                                React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: { borderBottomColor: colors.tooltipColor } }),
+                                "Duraci\u00F3n estimada del viaje"))),
+                    serviceItem.pet_seat_info &&
+                        Object.keys(serviceItem.pet_seat_info).length > 0 ? (React.createElement("div", { className: "flex items-center" },
+                        React.createElement("div", { className: `relative group cursor-default ` },
+                            React.createElement("div", { className: "flex items-center" },
+                                React.createElement("div", { className: `mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
+                                    React.createElement(LottiePlayer, { animationData: serviceItem.icons.petFriendlyAnim, width: "20px", height: "20px" })),
+                                React.createElement("div", { className: "h-auto mr-[4px] text-[13px] text-[#464647]" },
+                                    React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.petFriendly))),
+                            React.createElement("div", { className: " hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
+                                React.createElement("div", { className: "tooltip-arrow absolute text-[13.33px] -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: { borderBottomColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } }),
+                                "Este servicio incluye asientos para mascotas.")))) : null,
+                    serviceItem.is_change_ticket && (React.createElement("div", { className: "flex items-center" },
+                        React.createElement("div", { className: "relative group cursor-default" },
+                            React.createElement("div", { className: "flex items-center" },
+                                React.createElement("div", { className: `mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
+                                    React.createElement(LottiePlayer, { animationData: serviceItem.icons.flexibleAnim, width: "20px", height: "20px" })),
+                                React.createElement("div", { className: "h-auto mr-[4px] text-[13px] text-[#464647]" },
+                                    React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.flexible))),
+                            React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service text-[13.33px]", style: { backgroundColor: colors.tooltipColor } },
+                                React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent ", style: { borderBottomColor: colors.tooltipColor } }),
+                                "Esta empresa permite cambios sin costo hasta (", (_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) !== null && _c !== void 0 ? _c : 6,
+                                ") horas antes del viaje.")))),
+                    React.createElement("div", { className: "flex items-center" },
+                        React.createElement("div", null, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled) && (React.createElement("div", { className: "flex items-center mr-[10px]" },
+                            React.createElement("div", { className: `h-auto mr-[4px] text-[13px] text-[#464647] ${isSoldOut ? "grayscale" : ""}` },
+                                React.createElement(LottiePlayer, { animationData: serviceItem.icons.locationAnim, width: "20px", height: "20px" }))))),
+                        React.createElement("div", null, metaData && serviceItem.operator_details[4] && (React.createElement("div", { className: "flex items-center gap-[6px]" },
+                            (((_d = serviceItem.operator_details[3]) === null || _d === void 0 ? void 0 : _d.includes("18"))
+                                ? [...serviceItem.operator_details[4], "18"]
+                                : serviceItem.operator_details[4]).map((val, key) => {
+                                var _a, _b, _c, _d;
+                                return (key < 3 &&
+                                    ((_b = (_a = metaData === null || metaData === void 0 ? void 0 : metaData.amenities[val]) === null || _a === void 0 ? void 0 : _a.split(".")[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== "WATER") ||
+                                    val === "18" ? (React.createElement("div", { key: key, className: "relative mr-2 cursor-pointer" },
+                                    React.createElement("div", { className: "group" },
+                                        React.createElement("div", { className: `${isSoldOut ? "grayscale" : ""}` },
+                                            React.createElement(SvgAmenities, { moreAnemities: false, name: (_c = metaData.amenities[val]) === null || _c === void 0 ? void 0 : _c.split(".")[0].toLowerCase() })),
+                                        React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-nowrap z-10 mt-2.5 text-center shadow-service text-[13.33px]", style: { backgroundColor: colors.tooltipColor } },
+                                            React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: {
+                                                    borderBottomColor: colors.tooltipColor,
+                                                } }),
+                                            getAmenityName((_d = metaData.amenities[val]) === null || _d === void 0 ? void 0 : _d.split(".")[0].split("_").join(" ")))))) : null;
+                            }),
+                            ((_e = serviceItem.operator_details[4]) === null || _e === void 0 ? void 0 : _e.length) > 3 && (React.createElement("div", { className: "relative ml-1 cursor-pointer" },
+                                React.createElement("div", { className: "w-[16px] h-[16px] bg-gray-200 rounded-full flex items-center justify-center text-sm font-bold ml-[5px] group" },
+                                    React.createElement("img", { src: ((_f = serviceItem.icons) === null || _f === void 0 ? void 0 : _f.plus) ||
+                                            "/images/icons/amenities/icon_plus.svg", className: "w-[16px] h-[16px]", alt: "plus" }),
+                                    React.createElement("div", { className: "hidden group-hover:block absolute -top-[13px] left-[40px] z-20 pl-[10px]" },
+                                        React.createElement("div", { className: "flex flex-col gap-[10px] p-3 rounded-[8px] shadow-md animate-fadeIn relative", style: { backgroundColor: colors.tooltipColor } },
+                                            metaData &&
+                                                ((_g = serviceItem.operator_details[4]) === null || _g === void 0 ? void 0 : _g.map((val, key) => {
+                                                    var _a, _b, _c, _d, _e, _f, _g;
+                                                    const exceptions = [
+                                                        1, 2, 5, 7, 8, 9, 12, 13, 14, 15,
+                                                    ];
+                                                    return exceptions.includes(key) ? null : key >= 3 &&
+                                                        ((_b = (_a = metaData.amenities[val]) === null || _a === void 0 ? void 0 : _a.split(".")[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== "WATER" ? (React.createElement("div", { key: key, className: "flex items-center gap-[5px] whitespace-nowrap text-[13.33px]" },
+                                                        React.createElement("div", { className: `${isSoldOut ? "grayscale" : ""}` },
+                                                            React.createElement(SvgAmenities, { moreAnemities: true, name: (_d = (_c = metaData.amenities[val]) === null || _c === void 0 ? void 0 : _c.split(".")[0]) === null || _d === void 0 ? void 0 : _d.toUpperCase(), color: "white" })),
+                                                        React.createElement("span", { className: "text-white text-xs" }, getAmenityName((_g = (_f = (_e = metaData.amenities[val]) === null || _e === void 0 ? void 0 : _e.split(".")[0]) === null || _f === void 0 ? void 0 : _f.split("_")) === null || _g === void 0 ? void 0 : _g.join(" "))))) : null;
+                                                })),
+                                            React.createElement("div", { className: "tooltip-arrow absolute -left-[6px] top-[15px] w-0 h-0 border-t-8 border-b-8 border-r-8 border-t-transparent border-b-transparent ", style: {
+                                                    borderRightColor: colors.tooltipColor,
+                                                } }))))))))))))),
+        children,
+        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className: `  text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px] -z-10 rounded-b-[14px] text-[14px]`, style: { backgroundColor: isSoldOut ? "" : colors === null || colors === void 0 ? void 0 : colors.bottomStripColor } },
+            React.createElement(LottiePlayer, { animationData: serviceItem.icons.promoAnim, width: "18px", height: "18px" }),
+            React.createElement("span", { className: "ml-[10px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))),
+        React.createElement("div", { className: "absolute -top-[17px] left-0  w-full flex items-center justify-end gap-[12px] pr-[20px] z-10 " },
+            showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[8px] px-[20px] rounded-[38px] text-[13.33px]  z-20 ${isSoldOut ? "bg-[#ddd]" : ``}`, style: { backgroundColor: !isSoldOut && colors.ratingBottomColor } },
+                React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
+                    React.createElement(LottiePlayer, { animationData: serviceItem.icons.priorityStageAnim, width: "20px", height: "20px" })),
+                React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]` }, showTopLabel))),
+            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[8px] text-white px-[20px] rounded-[38px] text-[13.33px] z-20 ${isSoldOut ? "bg-[#ddd]" : `bg-[${colors.tooltipColor}]`}` },
+                React.createElement(LottiePlayer, { animationData: serviceItem.icons.connectingServiceIcon, width: "20px", height: "20px" }),
+                React.createElement("div", null, "Conexión"))),
+            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[8px] text-white px-[20px] rounded-[38px] text-[13.33px] z-20 ${isSoldOut ? "bg-[#ddd]" : `bg-[${colors.tooltipColor}]`}` },
+                React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "20px", height: "20px" }),
+                React.createElement("div", null, translation === null || translation === void 0 ? void 0 : translation.directService))),
+            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("div", { className: `flex items-center gap-[10px] py-[8px] text-white px-[20px] rounded-[38px] text-[13.33px] z-20 ${isSoldOut ? "bg-[#ddd]" : `bg-[${colors.tooltipColor}]`}` },
+                React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "20px", height: "20px" }),
+                React.createElement("div", null, "Tren Express"))))));
+}
+export default ServiceItemPB;

package/dist/assets/images/anims/service_list/60_percent_anim.json

@@ -0,0 +1 @@
+{"nm":"Main Scene","h":100,"w":100,"meta":{"g":"@lottiefiles/creator@1.89.0"},"layers":[{"ty":4,"nm":"Shape Layer 1","sr":1,"st":0,"op":150,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[37,9]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,100],"t":1},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[109,109],"t":48},{"s":[100,100],"t":89}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[50,50]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"gr","nm":"Group 1","it":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.51,0.27],[0.31,0.46],[0.14,0.56],[0,0.59],[-0.31,0.79],[-0.58,0.44],[-0.83,0],[-0.49,-0.27],[-0.26,-0.44],[-0.05,-0.49],[0,0],[0.25,0.2],[0.39,0],[0.27,-0.23],[0.15,-0.45],[0.02,-0.66],[0,-0.02],[0,-0.01],[-0.24,0.18],[-0.3,0.1],[-0.32,0],[-0.47,-0.26],[-0.28,-0.49],[0,-0.65],[0.3,-0.51],[0.52,-0.3],[0.67,0]],"o":[[-0.75,0],[-0.51,-0.28],[-0.31,-0.46],[-0.13,-0.57],[0,-1.1],[0.31,-0.8],[0.59,-0.44],[0.71,0],[0.49,0.27],[0.26,0.44],[0,0],[-0.07,-0.37],[-0.24,-0.21],[-0.37,0],[-0.27,0.22],[-0.15,0.45],[0,0.01],[0,0.02],[0.14,-0.24],[0.24,-0.18],[0.3,-0.1],[0.54,0],[0.47,0.25],[0.29,0.48],[0,0.61],[-0.29,0.5],[-0.51,0.3],[0,0]],"v":[[10.74,14.17],[8.85,13.76],[7.61,12.66],[6.94,11.13],[6.75,9.39],[7.21,6.55],[8.54,4.69],[10.67,4.03],[12.46,4.44],[13.58,5.5],[14.04,6.9],[12.08,6.9],[11.6,6.05],[10.65,5.74],[9.69,6.09],[9.06,7.1],[8.8,8.76],[8.8,8.81],[8.8,8.85],[9.38,8.22],[10.19,7.8],[11.11,7.64],[12.63,8.04],[13.75,9.14],[14.18,10.84],[13.73,12.52],[12.51,13.72],[10.74,14.17]]}}},{"ty":"sh","nm":"Path 2","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.23,0.12],[-0.13,0.22],[0,0.28],[0.14,0.21],[0.24,0.12],[0.31,0],[0.23,-0.12],[0.14,-0.22],[0,-0.29],[-0.14,-0.23],[-0.23,-0.13],[-0.31,0]],"o":[[0.3,0],[0.23,-0.13],[0.14,-0.22],[0,-0.31],[-0.13,-0.22],[-0.23,-0.13],[-0.3,0],[-0.23,0.12],[-0.14,0.22],[0,0.29],[0.14,0.22],[0.24,0.12],[0,0]],"v":[[10.62,12.38],[11.42,12.19],[11.97,11.66],[12.18,10.91],[11.97,10.12],[11.41,9.6],[10.6,9.41],[9.8,9.59],[9.24,10.11],[9.03,10.88],[9.24,11.66],[9.8,12.19],[10.62,12.38]]}}},{"ty":"sh","nm":"Path 3","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.64,0.43],[0.35,0.76],[0,1],[-0.35,0.76],[-0.64,0.43],[-0.91,0],[-0.64,-0.43],[-0.35,-0.77],[0,-1],[0.35,-0.77],[0.64,-0.43],[0.91,0]],"o":[[-0.91,0],[-0.64,-0.43],[-0.35,-0.77],[0,-1],[0.35,-0.77],[0.64,-0.43],[0.91,0],[0.64,0.43],[0.35,0.76],[0,1],[-0.35,0.76],[-0.64,0.43],[0,0]],"v":[[19.93,14.17],[17.61,13.52],[16.11,11.75],[15.59,9.1],[16.11,6.47],[17.61,4.68],[19.93,4.03],[22.25,4.68],[23.74,6.47],[24.27,9.1],[23.74,11.75],[22.25,13.52],[19.93,14.17]]}}},{"ty":"sh","nm":"Path 4","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.33,0.26],[-0.18,0.47],[0,0.65],[0.19,0.47],[0.34,0.25],[0.44,0],[0.34,-0.26],[0.19,-0.48],[0,-0.65],[-0.18,-0.48],[-0.33,-0.26],[-0.44,0]],"o":[[0.44,0],[0.34,-0.26],[0.19,-0.48],[0,-0.65],[-0.18,-0.48],[-0.33,-0.26],[-0.44,0],[-0.33,0.25],[-0.18,0.47],[0,0.65],[0.19,0.47],[0.34,0.26],[0,0]],"v":[[19.93,12.28],[21.08,11.89],[21.85,10.79],[22.13,9.1],[21.85,7.42],[21.08,6.33],[19.93,5.94],[18.77,6.33],[18,7.42],[17.73,9.1],[18,10.79],[18.77,11.89],[19.93,12.28]]}}},{"ty":"sh","nm":"Path 5","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[27.69,14],[33.13,4.2],[35.18,4.2],[29.73,14],[27.69,14]]}}},{"ty":"sh","nm":"Path 6","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.38,0.21],[0.22,0.38],[0,0.52],[-0.22,0.37],[-0.37,0.21],[-0.46,0],[-0.37,-0.21],[-0.21,-0.38],[0,-0.54],[0.22,-0.38],[0.37,-0.21],[0.47,0]],"o":[[-0.47,0],[-0.37,-0.21],[-0.22,-0.38],[0,-0.54],[0.22,-0.38],[0.38,-0.21],[0.48,0],[0.37,0.21],[0.22,0.37],[0,0.52],[-0.22,0.38],[-0.36,0.21],[0,0]],"v":[[34.94,14.17],[33.66,13.86],[32.77,12.98],[32.43,11.62],[32.77,10.25],[33.66,9.37],[34.92,9.06],[36.2,9.37],[37.08,10.25],[37.42,11.62],[37.08,12.98],[36.18,13.86],[34.94,14.17]]}}},{"ty":"sh","nm":"Path 7","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.13,0.08],[-0.07,0.17],[0,0.24],[0.07,0.17],[0.13,0.08],[0.17,0],[0.13,-0.09],[0.07,-0.17],[0,-0.25],[-0.07,-0.17],[-0.13,-0.09],[-0.17,0]],"o":[[0.17,0],[0.13,-0.09],[0.07,-0.17],[0,-0.26],[-0.07,-0.17],[-0.13,-0.09],[-0.17,0],[-0.13,0.08],[-0.07,0.17],[0,0.25],[0.07,0.17],[0.13,0.08],[0,0]],"v":[[34.92,12.75],[35.37,12.63],[35.68,12.24],[35.79,11.62],[35.68,10.98],[35.37,10.6],[34.92,10.46],[34.48,10.6],[34.17,10.98],[34.06,11.61],[34.17,12.24],[34.48,12.63],[34.92,12.75]]}}},{"ty":"sh","nm":"Path 8","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.38,0.21],[0.22,0.38],[0,0.52],[-0.22,0.37],[-0.37,0.21],[-0.47,0],[-0.37,-0.21],[-0.21,-0.38],[0,-0.54],[0.22,-0.38],[0.37,-0.21],[0.47,0]],"o":[[-0.47,0],[-0.37,-0.21],[-0.22,-0.38],[0,-0.54],[0.22,-0.38],[0.38,-0.21],[0.47,0],[0.37,0.21],[0.22,0.37],[0,0.52],[-0.21,0.38],[-0.37,0.21],[0,0]],"v":[[27.99,9.14],[26.72,8.83],[25.82,7.95],[25.49,6.59],[25.82,5.22],[26.72,4.34],[27.99,4.03],[29.25,4.34],[30.14,5.22],[30.47,6.59],[30.14,7.95],[29.25,8.83],[27.99,9.14]]}}},{"ty":"sh","nm":"Path 9","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.13,0.08],[-0.07,0.17],[0,0.24],[0.07,0.17],[0.13,0.08],[0.17,0],[0.13,-0.09],[0.07,-0.17],[0,-0.26],[-0.07,-0.17],[-0.13,-0.09],[-0.17,0]],"o":[[0.17,0],[0.13,-0.09],[0.07,-0.17],[0,-0.26],[-0.07,-0.17],[-0.13,-0.09],[-0.17,0],[-0.13,0.08],[-0.07,0.17],[0,0.24],[0.07,0.17],[0.13,0.08],[0,0]],"v":[[27.98,7.73],[28.43,7.6],[28.74,7.21],[28.85,6.59],[28.74,5.95],[28.43,5.57],[27.98,5.43],[27.53,5.57],[27.22,5.95],[27.11,6.59],[27.22,7.21],[27.53,7.6],[27.98,7.73]]}}},{"ty":"sh","nm":"Path 10","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.73,0.43],[0.42,0.76],[0,1],[-0.41,0.76],[-0.73,0.43],[-0.96,0],[-0.74,-0.43],[-0.4,-0.77],[0,-1],[0.41,-0.77],[0.74,-0.43],[0.96,0]],"o":[[-0.96,0],[-0.73,-0.43],[-0.41,-0.77],[0,-1],[0.42,-0.77],[0.73,-0.43],[0.96,0],[0.74,0.43],[0.41,0.76],[0,1],[-0.4,0.76],[-0.74,0.43],[0,0]],"v":[[46.66,14.17],[44.12,13.52],[42.4,11.75],[41.79,9.1],[42.4,6.47],[44.12,4.68],[46.66,4.03],[49.21,4.68],[50.91,6.47],[51.53,9.1],[50.91,11.75],[49.21,13.52],[46.66,14.17]]}}},{"ty":"sh","nm":"Path 11","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[-0.4,0.26],[-0.22,0.47],[0,0.65],[0.22,0.47],[0.41,0.25],[0.57,0],[0.41,-0.26],[0.22,-0.48],[0,-0.65],[-0.22,-0.48],[-0.41,-0.26],[-0.55,0]],"o":[[0.57,0],[0.41,-0.26],[0.22,-0.48],[0,-0.65],[-0.22,-0.48],[-0.4,-0.26],[-0.55,0],[-0.41,0.25],[-0.22,0.47],[0,0.65],[0.22,0.47],[0.41,0.26],[0,0]],"v":[[46.66,12.28],[48.11,11.89],[49.07,10.79],[49.4,9.1],[49.07,7.42],[48.11,6.33],[46.66,5.94],[45.22,6.33],[44.26,7.42],[43.93,9.1],[44.26,10.79],[45.22,11.89],[46.66,12.28]]}}},{"ty":"sh","nm":"Path 12","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[53.1,14],[53.1,4.2],[59.61,4.2],[59.61,5.89],[55.2,5.89],[55.2,8.27],[58.67,8.27],[58.67,9.91],[55.2,9.91],[55.2,14],[53.1,14]]}}},{"ty":"sh","nm":"Path 13","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[60.99,14],[60.99,4.2],[67.5,4.2],[67.5,5.89],[63.09,5.89],[63.09,8.27],[66.56,8.27],[66.56,9.91],[63.09,9.91],[63.09,14],[60.99,14]]}}},{"ty":"fl","nm":"Fill","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[37.094,9.075]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[37.094,9.075]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","nm":"Group 2","it":[{"ty":"sh","nm":"Path 14","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,-3.53],[0,0],[3.53,0],[0,0],[0,3.53],[0,0],[-3.53,0]],"o":[[0,0],[3.53,0],[0,0],[0,3.53],[0,0],[-3.53,0],[0,0],[0,-3.53],[0,0]],"v":[[6.4,0],[67.6,0],[74,6.4],[74,11.6],[67.6,18],[6.4,18],[0,11.6],[0,6.4],[6.4,0]]}}},{"ty":"fl","nm":"Fill","c":{"a":0,"k":[1,0.361,0.38]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[37,9]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[37,9]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":1}],"v":"5.7.0","fr":30,"op":89,"ip":0,"assets":[]}

package/dist/components/FilterSortBar/SingleFilterSheet.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { FilterCategory, FilterSortBarColors, FilterSortBarIcons } from "./types";
+interface SingleFilterSheetProps {
+    category: FilterCategory | null;
+    onClose: () => void;
+    onToggleOption: (optionId: string) => void;
+    onPriceRangeChange: (currentMin: number, currentMax: number) => void;
+    onClear: () => void;
+    onApply: () => void;
+    currencySign: string;
+    colors: Required<FilterSortBarColors>;
+    icons?: FilterSortBarIcons;
+}
+declare const SingleFilterSheet: ({ category, onClose, onToggleOption, onPriceRangeChange, onClear, onApply, currencySign, colors, icons, }: SingleFilterSheetProps) => React.JSX.Element;
+export default SingleFilterSheet;

package/dist/components/FilterSortBar/SingleFilterSheet.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { BottomSheet } from "../../ui/BottomSheet";
+import { CloseIcon } from "./icons";
+import OptionCheckboxList from "./OptionCheckboxList";
+import PriceRangeSlider from "./PriceRangeSlider";
+import SheetFooter from "./SheetFooter";
+const SingleFilterSheet = ({ category, onClose, onToggleOption, onPriceRangeChange, onClear, onApply, currencySign, colors, icons, }) => {
+    return (React.createElement(BottomSheet, { isOpen: !!category, onClose: onClose, showBackdrop: true, maxHeight: "75vh" }, category && (React.createElement("div", null,
+        React.createElement("div", { style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                marginBottom: 16,
+            } },
+            React.createElement("span", { style: { fontSize: 16, fontWeight: 700, color: "#464647" } }, category.sheetTitle || category.sectionLabel || category.label),
+            React.createElement("div", { onClick: onClose, style: { cursor: "pointer", padding: 4, WebkitTapHighlightColor: "transparent" } },
+                React.createElement(CloseIcon, { size: 14, src: icons === null || icons === void 0 ? void 0 : icons.closeIcon }))),
+        React.createElement("div", { style: { maxHeight: "50vh", overflowY: "auto" } }, category.kind === "price" && category.priceRange ? (React.createElement(PriceRangeSlider, { value: category.priceRange, onChange: onPriceRangeChange, currencySign: currencySign, primaryColor: colors.primaryColor })) : (React.createElement(OptionCheckboxList, { options: category.options || [], kind: category.kind, onToggle: onToggleOption, primaryColor: colors.primaryColor, starColor: colors.buttonColor || colors.primaryColor, icons: icons }))),
+        React.createElement(SheetFooter, { onClear: onClear, onApply: onApply, colors: colors })))));
+};
+export default SingleFilterSheet;

package/dist/components/PaymentOptions/PaymentOptionsDesktop.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { PaymentOptionsProps } from "./type";
+declare const PaymentOptionsDesktop: (props: PaymentOptionsProps) => React.JSX.Element;
+export default PaymentOptionsDesktop;

package/dist/components/PaymentOptions/PaymentOptionsDesktop.js

@@ -0,0 +1,5 @@
+import React from "react";
+const PaymentOptionsDesktop = (props) => {
+    return React.createElement("div", null, "PaymentOptionsDesktop");
+};
+export default PaymentOptionsDesktop;

package/dist/components/PaymentOptions/PaymentOptionsMobile.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { PaymentOptionsProps } from "./type";
+declare const PaymentOptionsMobile: (props: PaymentOptionsProps) => React.JSX.Element;
+export default PaymentOptionsMobile;

package/dist/components/PaymentOptions/PaymentOptionsMobile.js

@@ -0,0 +1,5 @@
+import React from "react";
+const PaymentOptionsMobile = (props) => {
+    return React.createElement("div", null, "PaymentOptionsMobile");
+};
+export default PaymentOptionsMobile;

package/dist/components/PaymentOptions/ResponsivePaymentOptions.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { PaymentOptionsProps } from "./type";
+export default function ResponsivePaymentOptions(props: PaymentOptionsProps): React.JSX.Element;

package/dist/components/PaymentOptions/ResponsivePaymentOptions.js

@@ -0,0 +1,10 @@
+import React from "react";
+import PaymentOptionsDesktop from "./PaymentOptionsDesktop";
+import PaymentOptionsMobile from "./PaymentOptionsMobile";
+export default function ResponsivePaymentOptions(props) {
+    const { variant } = props;
+    if (variant === "mobile") {
+        return React.createElement(PaymentOptionsMobile, Object.assign({}, props));
+    }
+    return React.createElement(PaymentOptionsDesktop, Object.assign({}, props));
+}