kupos-ui-components-lib 9.0.7 → 9.0.9

package/dist/styles.css

@@ -30,6 +30,9 @@
 .-top-\[14px\] {
   top: calc(14px * -1);
 }
+.-top-\[16px\] {
+  top: calc(16px * -1);
+}
 .top-\[2px\] {
   top: 2px;
 }
@@ -45,6 +48,9 @@
 .top-\[88\%\] {
   top: 88%;
 }
+.right-\[0\] {
+  right: 0;
+}
 .-bottom-\[9\%\] {
   bottom: calc(9% * -1);
 }
@@ -81,6 +87,9 @@
 .left-\[80px\] {
   left: 80px;
 }
+.-z-9 {
+  z-index: calc(9 * -1);
+}
 .-z-10 {
   z-index: calc(10 * -1);
 }
@@ -120,9 +129,15 @@
 .-mt-\[5px\] {
   margin-top: calc(5px * -1);
 }
+.-mt-\[16px\] {
+  margin-top: calc(16px * -1);
+}
 .mt-\[2px\] {
   margin-top: 2px;
 }
+.mt-\[3px\] {
+  margin-top: 3px;
+}
 .mt-\[5px\] {
   margin-top: 5px;
 }
@@ -132,6 +147,9 @@
 .mt-\[13px\] {
   margin-top: 13px;
 }
+.mt-\[14px\] {
+  margin-top: 14px;
+}
 .mt-\[15px\] {
   margin-top: 15px;
 }
@@ -174,9 +192,6 @@
 .mb-\[5px\] {
   margin-bottom: 5px;
 }
-.mb-\[8px\] {
-  margin-bottom: 8px;
-}
 .mb-\[10px\] {
   margin-bottom: 10px;
 }
@@ -204,6 +219,9 @@
 .ml-\[3px\] {
   margin-left: 3px;
 }
+.ml-\[4px\] {
+  margin-left: 4px;
+}
 .ml-\[5px\] {
   margin-left: 5px;
 }
@@ -276,6 +294,9 @@
 .max-h-\[66vh\] {
   max-height: 66vh;
 }
+.min-h-\[2\.2rem\] {
+  min-height: 2.2rem;
+}
 .min-h-\[2\.5rem\] {
   min-height: 2.5rem;
 }
@@ -300,6 +321,9 @@
 .w-\[50\%\] {
   width: 50%;
 }
+.w-\[55\%\] {
+  width: 55%;
+}
 .w-\[60\%\] {
   width: 60%;
 }
@@ -321,6 +345,9 @@
 .w-\[130px\] {
   width: 130px;
 }
+.w-\[150px\] {
+  width: 150px;
+}
 .w-\[188px\] {
   width: 188px;
 }
@@ -333,8 +360,8 @@
 .w-\[260px\] {
   width: 260px;
 }
-.w-\[320px\] {
-  width: 320px;
+.w-\[280px\] {
+  width: 280px;
 }
 .w-\[auto\] {
   width: auto;
@@ -342,9 +369,20 @@
 .w-auto {
   width: auto;
 }
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
 .w-full {
   width: 100%;
 }
+.w-max {
+  width: -moz-max-content;
+  width: max-content;
+}
+.max-w-\[120px\] {
+  max-width: 120px;
+}
 .max-w-\[165px\] {
   max-width: 165px;
 }
@@ -374,12 +412,15 @@
 .cursor-pointer {
   cursor: pointer;
 }
-.\[grid-template-columns\:14\%_30\%_2\.5\%_30\%_15\.5\%\] {
-  grid-template-columns: 14% 30% 2.5% 30% 15.5%;
-}
 .\[grid-template-columns\:14\%_40\%_0\.5\%_24\%_13\.5\%\] {
   grid-template-columns: 14% 40% 0.5% 24% 13.5%;
 }
+.\[grid-template-columns\:18\%_28\%_2\.5\%_28\%_15\.5\%\] {
+  grid-template-columns: 18% 28% 2.5% 28% 15.5%;
+}
+.\[grid-template-columns\:22\%_28\%_2\.5\%_24\%_15\.5\%\] {
+  grid-template-columns: 22% 28% 2.5% 24% 15.5%;
+}
 .grid-cols-\[0\.8fr_auto_26\%_1fr\] {
   grid-template-columns: 0.8fr auto 26% 1fr;
 }
@@ -431,6 +472,9 @@
 .gap-\[6px\] {
   gap: 6px;
 }
+.gap-\[8px\] {
+  gap: 8px;
+}
 .gap-\[10px\] {
   gap: 10px;
 }
@@ -512,9 +556,6 @@
   --tw-border-style: none;
   border-style: none;
 }
-.border-\[\#E6E6E6\] {
-  border-color: #E6E6E6;
-}
 .border-\[\#ccc\] {
   border-color: #ccc;
 }
@@ -573,9 +614,6 @@
 .p-\[10px_15px\] {
   padding: 10px 15px;
 }
-.p-\[12px\] {
-  padding: 12px;
-}
 .p-\[15px\] {
   padding: 15px;
 }
@@ -591,6 +629,9 @@
 .px-\[14px\] {
   padding-inline: 14px;
 }
+.px-\[15px\] {
+  padding-inline: 15px;
+}
 .px-\[20px\] {
   padding-inline: 20px;
 }
@@ -603,6 +644,9 @@
 .py-\[6px\] {
   padding-block: 6px;
 }
+.py-\[10px\] {
+  padding-block: 10px;
+}
 .py-\[12px\] {
   padding-block: 12px;
 }
@@ -612,12 +656,18 @@
 .pt-\[5px\] {
   padding-top: 5px;
 }
+.pt-\[6px\] {
+  padding-top: 6px;
+}
 .pt-\[10px\] {
   padding-top: 10px;
 }
 .pt-\[20px\] {
   padding-top: 20px;
 }
+.pt-\[26px\] {
+  padding-top: 26px;
+}
 .pt-\[35px\] {
   padding-top: 35px;
 }
@@ -639,6 +689,12 @@
 .pb-\[10px\] {
   padding-bottom: 10px;
 }
+.pb-\[14px\] {
+  padding-bottom: 14px;
+}
+.pl-\[6px\] {
+  padding-left: 6px;
+}
 .pl-\[15px\] {
   padding-left: 15px;
 }
@@ -690,13 +746,13 @@
   --tw-font-weight: 900;
   font-weight: 900;
 }
-.text-wrap {
-  text-wrap: wrap;
-}
 .break-normal {
   overflow-wrap: normal;
   word-break: normal;
 }
+.text-ellipsis {
+  text-overflow: ellipsis;
+}
 .whitespace-normal {
   white-space: normal;
 }
@@ -730,6 +786,9 @@
 .uppercase {
   text-transform: uppercase;
 }
+.line-through {
+  text-decoration-line: line-through;
+}
 .opacity-0 {
   opacity: 0%;
 }

package/dist/ui/AmenitiesBlock.js

@@ -1,5 +1,4 @@
 import React from "react";
-import LottiePlayer from "../assets/LottiePlayer";
 const DEFAULT_PRIORITY_IDS = ["2", "3", "13"];
 const TOOLTIP_CLASS = "hidden group-hover:block absolute top-[30px] left-1/2 -translate-x-1/2 text-white rounded-[14px] whitespace-nowrap mt-2.5 text-center shadow-service text-[13.33px]";
 const getAmenityBaseName = (amenityStr) => { var _a; return (_a = amenityStr === null || amenityStr === void 0 ? void 0 : amenityStr.split(".")[0]) !== null && _a !== void 0 ? _a : ""; };
@@ -27,7 +26,7 @@ const getAmenitySplit = ({ isPeru, amenities, priorityIds }) => {
     };
 };
 const AmenitiesBlock = ({ serviceItem, metaData, isSoldOut, colors, isPeru, getAnimationIcon, getAmenityName, SvgAmenities, }) => {
-    var _a, _b, _c;
+    var _a, _b;
     if (!metaData ||
         !((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details) === null || _a === void 0 ? void 0 : _a[4]) ||
         !serviceItem.operator_details[4].length) {
@@ -45,39 +44,29 @@ const AmenitiesBlock = ({ serviceItem, metaData, isSoldOut, colors, isPeru, getA
     });
     const shouldShowPlus = plusAmenities.length > 0;
     const grayscaleClass = isSoldOut ? "grayscale" : "";
-    return (React.createElement("div", { className: "flex items-center gap-[6px]" },
-        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled) && (React.createElement("div", { className: grayscaleClass },
-            React.createElement(LottiePlayer, { animationData: getAnimationIcon("locationAnim"), width: "20px", height: "20px" }))),
-        visibleAmenities.map((val, key) => {
-            const raw = metaData.amenities[val];
-            if (isWater(raw))
-                return null;
-            const baseName = getAmenityBaseName(raw);
-            return (React.createElement("div", { key: key, className: "relative group cursor-pointer" },
-                React.createElement("div", { className: grayscaleClass },
-                    React.createElement(SvgAmenities, { moreAnemities: false, name: baseName.toLowerCase() })),
-                React.createElement("div", { className: TOOLTIP_CLASS, style: {
-                        backgroundColor: colors.tooltipColor,
-                        zIndex: 21,
-                        padding: "12px",
-                    } },
-                    React.createElement(TooltipArrow, { color: colors.tooltipColor }),
-                    getAmenityName(baseName.split("_").join(" ")))));
-        }),
-        shouldShowPlus && (React.createElement("div", { className: "relative ml-1 cursor-pointer" },
-            React.createElement("div", { className: "group" },
-                React.createElement("img", { src: ((_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.plus) ||
-                        "/images/icons/amenities/icon_plus.svg", className: "w-[16px] h-[16px]", alt: "plus" }),
-                React.createElement("div", { style: { zIndex: 100 }, className: TOOLTIP_CLASS },
-                    React.createElement(TooltipArrow, { color: colors.tooltipColor }),
-                    React.createElement("div", { className: "flex flex-col gap-[10px] p-3 rounded-[8px] shadow-md", style: { backgroundColor: colors.tooltipColor } }, plusAmenities.map((val, key) => {
-                        const raw = metaData.amenities[val];
-                        if (isWater(raw))
-                            return null;
-                        const baseName = getAmenityBaseName(raw);
-                        return (React.createElement("div", { key: key, className: "flex items-center gap-[5px] text-xs whitespace-nowrap" },
-                            React.createElement(SvgAmenities, { moreAnemities: true, name: baseName.toUpperCase(), color: "white" }),
-                            getAmenityName(baseName.split("_").join(" "))));
-                    }))))))));
+    return (React.createElement("div", { className: "flex items-center gap-[6px]" }, visibleAmenities.map((val, key) => {
+        const raw = metaData.amenities[val];
+        if (isWater(raw))
+            return null;
+        const baseName = getAmenityBaseName(raw);
+        return (React.createElement("div", { key: key, className: "relative group cursor-pointer" },
+            React.createElement("div", { className: grayscaleClass },
+                React.createElement(SvgAmenities, { moreAnemities: false, name: baseName.toLowerCase() })),
+            React.createElement("div", { className: TOOLTIP_CLASS, style: {
+                    backgroundColor: colors.tooltipColor,
+                    zIndex: 21,
+                    padding: "12px",
+                } },
+                React.createElement(TooltipArrow, { color: colors.tooltipColor }),
+                React.createElement("div", { className: "flex flex-col gap-[10px]" }, amenities.map((id, i) => {
+                    const rawItem = metaData.amenities[id];
+                    if (isWater(rawItem))
+                        return null;
+                    const name = getAmenityBaseName(rawItem);
+                    return (React.createElement("div", { key: i, className: "flex items-center gap-[5px] text-xs whitespace-nowrap" },
+                        React.createElement(SvgAmenities, { moreAnemities: true, name: name.toUpperCase(), color: "white" }),
+                        getAmenityName(name.split("_").join(" "))));
+                })))));
+    })));
 };
 export default AmenitiesBlock;

package/dist/ui/BottomAmenities/BottomAmenities.js

@@ -10,13 +10,14 @@ function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, i
             Object.keys(serviceItem.pet_seat_info).length > 0);
     return (React.createElement("div", { className: "flex items-center mt-[15px] border-t border-[#eee] pt-[6px]" },
         React.createElement("div", { className: "grid items-center gap-[2%] flex-1 ", style: {
-                gridTemplateColumns: "18% 18% 23% 23%",
+                // gridTemplateColumns: " 28% 21% 23% 23%",
+                gridTemplateColumns: "28% 17% 23% 23%",
             } }, otherItems.map((item) => (React.createElement("div", { key: item.key, className: "flex items-center" }, item.render)))),
         React.createElement("div", { className: "flex items-center justify-end shrink-0 ml-[5px] w-[150px]" },
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled) && (React.createElement("div", { className: grayscaleClass + " mr-[10px]" },
                 React.createElement(LottiePlayer, { animationData: getAnimationIcon("locationAnim"), width: "20px", height: "20px" }))),
             serviceItem.is_change_ticket && (React.createElement(FlexibleBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, serviceItem: serviceItem, isSoldOut: isSoldOut })),
             hasPetInfo && (React.createElement(PetBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, isSoldOut: isSoldOut })),
-            showDownArrow ? (React.createElement("div", { className: "flex items-center cursor-pointer ml-[4px] transition-transform duration-300 w-[14px] h-[14px]", onClick: onToggleExpand }, downArrowIcon)) : null)));
+            showDownArrow ? (React.createElement("div", { className: `flex items-center cursor-pointer ml-[4px] transition-transform duration-300 w-[14px] h-[14px] ${isItemExpanded ? "rotate-180" : ""}`, onClick: onToggleExpand }, downArrowIcon)) : null)));
 }
 export default BottomAmenities;

package/dist/ui/DateTimeSection/DateTimeSection.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+interface DateTimeSectionProps {
+    serviceItem: {
+        icons?: {
+            origin?: string;
+            destination?: string;
+            [key: string]: any;
+        };
+        boarding_stages?: string;
+        dropoff_stages?: string;
+        travel_date: string;
+        arrival_date: string;
+        dep_time: string;
+        arr_time: string;
+        [key: string]: any;
+    };
+    isSoldOut: boolean;
+    isCiva?: boolean;
+    isLinatal?: boolean;
+    removeArrivalTime?: boolean;
+    orignLabel?: string;
+    destinationLabel?: string;
+    busStage?: Record<string, string>;
+    metaData?: any;
+    colors: Record<string, any>;
+}
+declare function DateTimeSection({ serviceItem, isSoldOut, isCiva, isLinatal, removeArrivalTime, orignLabel, destinationLabel, busStage, metaData, colors, }: DateTimeSectionProps): React.ReactElement;
+export default DateTimeSection;

package/dist/ui/DateTimeSection/DateTimeSection.js

@@ -0,0 +1,58 @@
+import React from "react";
+import DateService from "../../utils/DateService";
+import StageTooltip from "../StagesTooltip";
+function DateTimeSection({ serviceItem, isSoldOut, isCiva, isLinatal, removeArrivalTime, orignLabel, destinationLabel, busStage, metaData, colors, }) {
+    var _a, _b;
+    const depTime = serviceItem.dep_time || "";
+    const hasAM = depTime.includes("AM");
+    const hasPM = depTime.includes("PM");
+    const convertTo24Hour = (depTime) => {
+        const hasAM = depTime.includes("AM");
+        const hasPM = depTime.includes("PM");
+        const [timePart] = depTime.split(/AM|PM/).map((part) => part.trim());
+        const [hour, minute] = timePart.split(":").map(Number);
+        const pad = (n) => (n < 10 ? "0" + n : String(n));
+        if (hasAM) {
+            return `${pad(hour === 12 ? 0 : hour)}:${pad(minute)}`;
+        }
+        if (hasPM) {
+            return `${hour === 12 ? hour : hour + 12}:${pad(minute)}`;
+        }
+        return timePart;
+    };
+    const cleanedDepTime = convertTo24Hour(depTime);
+    return (React.createElement("div", { className: `min-h-[2.2rem] grid grid-cols-[26px_auto_26%_1fr] gap-x-4 items-center text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: {
+            gridTemplateRows: "1fr",
+        } },
+        React.createElement("div", { className: "flex flex-col gap-[6px]" },
+            orignLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center" }, orignLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center" },
+                React.createElement("img", { src: (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.origin, alt: "origin", className: `w-[16px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` }))),
+            !isCiva &&
+                (destinationLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center" }, destinationLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center" },
+                    React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.destination, className: `w-[16px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }))))),
+        React.createElement("div", { className: "flex flex-col gap-[6px]" },
+            React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
+                React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.travel_date))),
+            !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
+                React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.arrival_date))))),
+        React.createElement("div", { className: "flex flex-col gap-[6px] items-center" },
+            React.createElement("div", { className: "h-[20px] flex items-center justify-center" },
+                React.createElement("div", null, "\u2022")),
+            !isCiva && (React.createElement("div", { className: "h-[20px] flex items-center justify-center" }, removeArrivalTime ? null : serviceItem.arr_time ? (React.createElement("div", null, "\u2022")) : null))),
+        React.createElement("div", { className: "flex flex-col gap-[6px]" },
+            React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
+                React.createElement("div", { className: "font-[900] bold-text" }, isLinatal ? (React.createElement(React.Fragment, null,
+                    cleanedDepTime,
+                    " ",
+                    React.createElement("span", null, hasPM ? "PM" : hasAM ? "AM" : ""),
+                    !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dep_time.includes("AM")) &&
+                        !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dep_time.includes("PM")) &&
+                        DateService.ampmOnly(serviceItem.dep_time))) : (DateService.formatTime(serviceItem.dep_time)))),
+            !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
+                React.createElement("div", { className: "font-[900] bold-text" }, removeArrivalTime
+                    ? null
+                    : serviceItem.arr_time
+                        ? DateService.formatTime(serviceItem.arr_time)
+                        : null))))));
+}
+export default DateTimeSection;

package/dist/ui/DirectoBlock.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+declare const DirectoBlock: ({ translation, isSoldOut, colors, getAnimationIcon }: {
+    translation: any;
+    isSoldOut: any;
+    colors: any;
+    getAnimationIcon: any;
+}) => React.JSX.Element;
+export default DirectoBlock;

package/dist/ui/DirectoBlock.js

@@ -0,0 +1,11 @@
+import React from "react";
+import LottiePlayer from "../assets/LottiePlayer";
+const DirectoBlock = ({ translation, isSoldOut, colors, getAnimationIcon }) => (React.createElement("div", { className: "flex items-center relative whitespace-nowrap mt-[3px]" },
+    React.createElement("div", { className: `w-[18px] mr-[4px] ${isSoldOut ? "grayscale" : ""}` },
+        React.createElement(LottiePlayer, { animationData: getAnimationIcon("directoAnim"), width: "14px", height: "14px" })),
+    React.createElement("div", { className: "group text-[13.33px] cursor-pointer" }, translation === null || translation === void 0 ? void 0 :
+        translation.directService,
+        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 w-fit z-10 mt-2.5 text-center shadow-service text-[12px]", 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 } }), translation === null || translation === void 0 ? void 0 :
+            translation.directServiceText))));
+export default DirectoBlock;

package/dist/ui/DurationBlock.js

@@ -1,7 +1,7 @@
 import React from "react";
-const DurationBlock = ({ serviceItem, translation, renderIcon, isSoldOut, colors, }) => (React.createElement("div", { className: "flex items-baseline relative whitespace-nowrap" },
+const DurationBlock = ({ serviceItem, translation, renderIcon, isSoldOut, colors, }) => (React.createElement("div", { className: "flex items-baseline relative whitespace-nowrap " },
     React.createElement("div", { className: `w-[18px] mr-[4px] ${isSoldOut ? "grayscale" : ""}` }, renderIcon("hours", "14px")),
-    React.createElement("div", { className: "group text-[13.33px]" },
+    React.createElement("div", { className: "group text-[13.33px] cursor-pointer" },
         serviceItem.duration,
         " ",
         translation.hours,

package/dist/ui/ExpendedDropDown/ExpandedDropdown.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 interface ExpandedDropdownProps {
     serviceItem: {
+        change_ticket_hours?: number;
         pet_seat_info?: Record<string, any>;
         is_change_ticket?: boolean;
         is_tracking_enabled?: boolean;

package/dist/ui/ExpendedDropDown/ExpandedDropdown.js

@@ -1,27 +1,37 @@
 import React from "react";
-import LottiePlayer from "../../assets/LottiePlayer";
 function ExpandedDropdown({ serviceItem, showPromo, colors, grayscaleClass, translation, getAnimationIcon, }) {
+    var _a, _b;
     const hasPetInfo = serviceItem.pet_seat_info &&
         Object.keys(serviceItem.pet_seat_info).length > 0;
-    return (React.createElement("div", { className: "px-[15px] pt-[26px] pb-[14px] -mt-[16px] pt-[20px] relative -z-9", style: {
-            backgroundColor: "#f5f5f5",
+    return (React.createElement("div", { className: "px-[15px] pt-[26px] pb-[14px] -mt-[16px] pt-[35px] relative -z-9", style: {
+            backgroundColor: "#ffefef",
             borderRadius: "0 0 10px 10px",
             // border: showPromo ? `1px solid ${colors.priceColor}` : "1px solid #ccc",
-            border: `1px solid ${colors.priceColor}`,
-            borderTop: "none",
+            // border: `1px solid ${colors.priceColor}`,
+            // borderTop: "none",
         } },
-        React.createElement("div", { className: "flex flex-col gap-[12px] text-[13px] text-[#464647]" },
-            hasPetInfo && (React.createElement("div", { className: "flex items-center gap-[10px]" },
-                React.createElement(LottiePlayer, { animationData: getAnimationIcon("petFriendlyAnim"), width: "20px", height: "20px" }),
-                React.createElement("div", { className: "h-auto mr-[4px] text-[13px] text-[#464647] bold-text" },
-                    React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.petFriendly)))),
-            serviceItem.is_change_ticket && (React.createElement("div", { className: "flex items-center gap-[10px]" },
-                React.createElement(LottiePlayer, { animationData: getAnimationIcon("flexibleIcon"), width: "20px", height: "20px" }),
-                React.createElement("div", { className: "h-auto mr-[4px] text-[13px] text-[#464647] bold-text" },
-                    React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.flexible)))),
-            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled) && (React.createElement("div", { className: `${grayscaleClass} flex items-center gap-[10px]` },
-                React.createElement(LottiePlayer, { animationData: getAnimationIcon("locationAnim"), width: "20px", height: "20px" }),
-                React.createElement("div", { className: "h-auto mr-[4px] text-[13px] text-[#464647] bold-text" },
-                    React.createElement("span", null, "GPS Tracker")))))));
+        React.createElement("div", { className: "flex flex-col gap-[10px] text-[13px] text-[#464647]", style: { lineHeight: 1.6 } },
+            React.createElement("div", { className: "flex gap-[8px] text-[13.33px]" },
+                React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
+                React.createElement("span", null,
+                    React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de anulaci\u00F3n:"),
+                    " Tu pasaje puede ser anulado de forma online",
+                    " ",
+                    React.createElement("span", { className: "bold-text" },
+                        "hasta ", (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) !== null && _a !== void 0 ? _a : 6,
+                        " horas antes"),
+                    " ",
+                    "de la salida del bus. Al anular tu pasaje recibir\u00E1s una devoluci\u00F3n del 85% del monto de tu compra.")),
+            React.createElement("div", { className: "flex gap-[8px]" },
+                React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
+                React.createElement("span", null,
+                    React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de cambios:"),
+                    " Tu pasaje puede ser cambiado de manera online",
+                    " ",
+                    React.createElement("span", { className: "bold-text" },
+                        "hasta ", (_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) !== null && _b !== void 0 ? _b : 6,
+                        " horas antes"),
+                    " ",
+                    "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay.")))));
 }
 export default ExpandedDropdown;

package/dist/ui/FlexibleBlock.js

@@ -3,16 +3,14 @@ import LottiePlayer from "../assets/LottiePlayer";
 const FlexibleBlock = ({ translation, getAnimationIcon, colors, serviceItem, isSoldOut, }) => {
     var _a;
     return (React.createElement("div", { className: "flex items-center" },
-        React.createElement("div", { className: "relative group cursor-default" },
+        React.createElement("div", { className: "relative group cursor-pointer" },
             React.createElement("div", { className: "flex items-center" },
                 React.createElement("div", { className: `mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
                     React.createElement(LottiePlayer
                     // animationData={serviceItem.icons.flexibleAnim}
                     , { 
                         // animationData={serviceItem.icons.flexibleAnim}
-                        animationData: getAnimationIcon("flexibleIcon"), 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))),
+                        animationData: getAnimationIcon("flexibleIcon"), width: "20px", height: "20px" }))),
             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-[12px]", style: {
                     backgroundColor: colors.tooltipColor,
                     lineHeight: "1.5",

package/dist/ui/PetBlock.js

@@ -8,9 +8,7 @@ const PetBlock = ({ translation, getAnimationIcon, colors, isSoldOut }) => (Reac
                 // animationData={serviceItem.icons.petFriendlyAnim}
                 , { 
                     // animationData={serviceItem.icons.petFriendlyAnim}
-                    animationData: getAnimationIcon("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))),
+                    animationData: getAnimationIcon("petFriendlyAnim"), width: "20px", height: "20px" }))),
         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."))));

package/dist/ui/RatingBlock.js

@@ -2,8 +2,12 @@ import React from "react";
 import RatingHover from "../components/ServiceItem/RatingHover";
 const RatingBlock = ({ showRating, serviceItem, isSoldOut, colors, t, translation, }) => (React.createElement("div", { className: "flex items-center whitespace-nowrap" },
     showRating && (React.createElement(RatingHover, { serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation })),
-    React.createElement("span", { className: "ml-[10px] text-[13.33px]", style: {
+    React.createElement("div", { className: "group relative ml-[10px] text-[13.33px]", style: {
             marginLeft: showRating ? "10px" : "0",
             color: isSoldOut ? "#c0c0c0" : "#464647",
-        } }, serviceItem.operator_details[2])));
+        } },
+        React.createElement("span", { className: "block max-w-[120px] overflow-hidden text-ellipsis whitespace-nowrap cursor-pointer" }, serviceItem.operator_details[2]),
+        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 w-max text-center shadow-service text-[12px]", 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 } }),
+            serviceItem.operator_details[2]))));
 export default RatingBlock;

package/dist/ui/SeatSection/SeatSection.js

@@ -75,7 +75,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
     const strikethroughStyle = Object.assign({ color: "#ccc", display: "flex", textAlign: "end", textDecoration: "line-through" }, (isPeru
         ? { position: "relative", top: 0 }
         : { position: "absolute", top: isCentered ? "-10px" : "-18px" }));
-    return (React.createElement("div", { className: "relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem]", style: isCentered ? { alignItems: "center" } : {} },
+    return (React.createElement("div", { className: "relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.2rem]", style: isCentered ? { alignItems: "center" } : {} },
         React.createElement("div", { className: "flex flex-col justify-between", style: { gap: "10px" } }, renderLabels()),
         React.createElement("div", { className: "flex flex-col justify-between absolute inset-y-0 right-0 left-1/2 h-full", style: {
                 color: isSoldOut ? "#c0c0c0" : priceColor,

package/dist/ui/TopAmenities/PromoCountdown.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+interface PromoCountdownProps {
+    countdownSeconds: number;
+}
+interface PromoCountdownState {
+    remaining: number;
+}
+declare class PromoCountdown extends React.Component<PromoCountdownProps, PromoCountdownState> {
+    private timer;
+    constructor(props: PromoCountdownProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: PromoCountdownProps): void;
+    componentWillUnmount(): void;
+    private clearTimer;
+    private startTimer;
+    render(): React.JSX.Element;
+}
+export default PromoCountdown;