kupos-ui-components-lib 9.9.1 → 9.9.2

package/dist/styles.css

@@ -33,6 +33,9 @@
 .-top-\[11px\] {
   top: calc(11px * -1);
 }
+.-top-\[13px\] {
+  top: calc(13px * -1);
+}
 .-top-\[18px\] {
   top: calc(18px * -1);
 }
@@ -60,9 +63,15 @@
 .top-\[88\%\] {
   top: 88%;
 }
+.top-\[calc\(100\%\+10px\)\] {
+  top: calc(100% + 10px);
+}
 .right-\[0px\] {
   right: 0px;
 }
+.right-\[18px\] {
+  right: 18px;
+}
 .-bottom-\[9\%\] {
   bottom: calc(9% * -1);
 }
@@ -75,6 +84,12 @@
 .-bottom-\[36px\] {
   bottom: calc(36px * -1);
 }
+.-bottom-\[44px\] {
+  bottom: calc(44px * -1);
+}
+.bottom-\[11px\] {
+  bottom: 11px;
+}
 .bottom-\[35px\] {
   bottom: 35px;
 }
@@ -168,9 +183,15 @@
 .m-\[auto\] {
   margin: auto;
 }
+.mx-\[6px\] {
+  margin-inline: 6px;
+}
 .mx-auto {
   margin-inline: auto;
 }
+.my-\[8px\] {
+  margin-block: 8px;
+}
 .-mt-\[15px\] {
   margin-top: calc(15px * -1);
 }
@@ -189,15 +210,27 @@
 .mt-\[5px\] {
   margin-top: 5px;
 }
+.mt-\[6px\] {
+  margin-top: 6px;
+}
 .mt-\[10px\] {
   margin-top: 10px;
 }
+.mt-\[12px\] {
+  margin-top: 12px;
+}
 .mt-\[13px\] {
   margin-top: 13px;
 }
+.mt-\[14px\] {
+  margin-top: 14px;
+}
 .mt-\[15px\] {
   margin-top: 15px;
 }
+.mt-\[16px\] {
+  margin-top: 16px;
+}
 .mt-\[20px\] {
   margin-top: 20px;
 }
@@ -324,6 +357,9 @@
 .h-\[12px\] {
   height: 12px;
 }
+.h-\[13px\] {
+  height: 13px;
+}
 .h-\[14px\] {
   height: 14px;
 }
@@ -342,6 +378,9 @@
 .h-\[24px\] {
   height: 24px;
 }
+.h-\[26px\] {
+  height: 26px;
+}
 .h-\[30px\] {
   height: 30px;
 }
@@ -369,6 +408,9 @@
 .w-\[12px\] {
   width: 12px;
 }
+.w-\[13px\] {
+  width: 13px;
+}
 .w-\[14px\] {
   width: 14px;
 }
@@ -381,6 +423,9 @@
 .w-\[20px\] {
   width: 20px;
 }
+.w-\[26px\] {
+  width: 26px;
+}
 .w-\[50\%\] {
   width: 50%;
 }
@@ -396,9 +441,6 @@
 .w-\[65\%\%\] {
   width: 65%%;
 }
-.w-\[80\%\] {
-  width: 80%;
-}
 .w-\[100\%\] {
   width: 100%;
 }
@@ -452,6 +494,12 @@
 .max-w-\[165px\] {
   max-width: 165px;
 }
+.max-w-\[220px\] {
+  max-width: 220px;
+}
+.max-w-full {
+  max-width: 100%;
+}
 .min-w-\[75px\] {
   min-width: 75px;
 }
@@ -473,6 +521,9 @@
   --tw-translate-y: -10px;
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
+.rotate-0 {
+  rotate: 0deg;
+}
 .rotate-180 {
   rotate: 180deg;
 }
@@ -482,6 +533,9 @@
 .cursor-default {
   cursor: default;
 }
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
 .cursor-pointer {
   cursor: pointer;
 }
@@ -494,12 +548,21 @@
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
 .grid-cols-\[0\.8fr_auto_26\%_1fr\] {
   grid-template-columns: 0.8fr auto 26% 1fr;
 }
 .grid-cols-\[1\.5fr_1fr_auto\] {
   grid-template-columns: 1.5fr 1fr auto;
 }
+.grid-cols-\[25\%_48\%_27\%\] {
+  grid-template-columns: 25% 48% 27%;
+}
 .grid-cols-\[26px_auto_26\%_1fr\] {
   grid-template-columns: 26px auto 26% 1fr;
 }
@@ -527,6 +590,9 @@
 .items-start {
   align-items: flex-start;
 }
+.items-stretch {
+  align-items: stretch;
+}
 .justify-between {
   justify-content: space-between;
 }
@@ -569,6 +635,12 @@
 .gap-\[14px\] {
   gap: 14px;
 }
+.gap-\[16px\] {
+  gap: 16px;
+}
+.gap-\[20px\] {
+  gap: 20px;
+}
 .gap-x-\[2\%\] {
   -moz-column-gap: 2%;
        column-gap: 2%;
@@ -577,12 +649,20 @@
   -moz-column-gap: 8px;
        column-gap: 8px;
 }
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .overflow-hidden {
   overflow: hidden;
 }
 .overflow-y-hidden {
   overflow-y: hidden;
 }
+.rounded-\[4px\] {
+  border-radius: 4px;
+}
 .rounded-\[8px\] {
   border-radius: 8px;
 }
@@ -595,6 +675,9 @@
 .rounded-\[15px\] {
   border-radius: 15px;
 }
+.rounded-\[16px\] {
+  border-radius: 16px;
+}
 .rounded-\[18px\] {
   border-radius: 18px;
 }
@@ -638,6 +721,10 @@
   border-top-style: var(--tw-border-style);
   border-top-width: 8px;
 }
+.border-r {
+  border-right-style: var(--tw-border-style);
+  border-right-width: 1px;
+}
 .border-r-8 {
   border-right-style: var(--tw-border-style);
   border-right-width: 8px;
@@ -666,6 +753,10 @@
   border-bottom-style: var(--tw-border-style);
   border-bottom-width: 8px;
 }
+.border-l {
+  border-left-style: var(--tw-border-style);
+  border-left-width: 1px;
+}
 .border-l-8 {
   border-left-style: var(--tw-border-style);
   border-left-width: 8px;
@@ -682,6 +773,9 @@
   --tw-border-style: none;
   border-style: none;
 }
+.border-\[\#363c48\] {
+  border-color: #363c48;
+}
 .border-\[\#ccc\] {
   border-color: #ccc;
 }
@@ -700,9 +794,24 @@
 .border-l-transparent {
   border-left-color: transparent;
 }
+.bg-\[\#0C1421\] {
+  background-color: #0C1421;
+}
+.bg-\[\#2d374d\] {
+  background-color: #2d374d;
+}
+.bg-\[\#222b3d\] {
+  background-color: #222b3d;
+}
 .bg-\[\#E6E6E6\] {
   background-color: #E6E6E6;
 }
+.bg-\[\#FF5C60\] {
+  background-color: #FF5C60;
+}
+.bg-\[\#FF8F45\] {
+  background-color: #FF8F45;
+}
 .bg-\[\#FFF2F2\] {
   background-color: #FFF2F2;
 }
@@ -721,6 +830,9 @@
 .bg-\[lightgray\] {
   background-color: lightgray;
 }
+.bg-transparent {
+  background-color: transparent;
+}
 .bg-\[length\:200\%_200\%\] {
   background-size: 200% 200%;
 }
@@ -743,6 +855,9 @@
 .p-\[10px_15px\] {
   padding: 10px 15px;
 }
+.p-\[14px\] {
+  padding: 14px;
+}
 .p-\[15px\] {
   padding: 15px;
 }
@@ -776,9 +891,18 @@
 .px-\[15px\] {
   padding-inline: 15px;
 }
+.px-\[16px\] {
+  padding-inline: 16px;
+}
 .px-\[20px\] {
   padding-inline: 20px;
 }
+.px-\[22px\] {
+  padding-inline: 22px;
+}
+.py-\[2px\] {
+  padding-block: 2px;
+}
 .py-\[4px\] {
   padding-block: 4px;
 }
@@ -791,6 +915,9 @@
 .py-\[8px\] {
   padding-block: 8px;
 }
+.py-\[9px\] {
+  padding-block: 9px;
+}
 .py-\[10px\] {
   padding-block: 10px;
 }
@@ -806,6 +933,9 @@
 .pt-\[10px\] {
   padding-top: 10px;
 }
+.pt-\[14px\] {
+  padding-top: 14px;
+}
 .pt-\[20px\] {
   padding-top: 20px;
 }
@@ -821,6 +951,9 @@
 .pt-\[50px\] {
   padding-top: 50px;
 }
+.pr-\[10px\] {
+  padding-right: 10px;
+}
 .pr-\[15px\] {
   padding-right: 15px;
 }
@@ -830,6 +963,9 @@
 .pr-\[22px\] {
   padding-right: 22px;
 }
+.pb-\[6px\] {
+  padding-bottom: 6px;
+}
 .pb-\[7px\] {
   padding-bottom: 7px;
 }
@@ -848,6 +984,9 @@
 .pl-\[6px\] {
   padding-left: 6px;
 }
+.pl-\[22px\] {
+  padding-left: 22px;
+}
 .text-center {
   text-align: center;
 }
@@ -863,9 +1002,6 @@
 .text-right {
   text-align: right;
 }
-.text-\[9px\] {
-  font-size: 9px;
-}
 .text-\[10px\] {
   font-size: 10px;
 }
@@ -887,6 +1023,9 @@
 .text-\[14px\] {
   font-size: 14px;
 }
+.text-\[16px\] {
+  font-size: 16px;
+}
 .text-\[17\.33px\] {
   font-size: 17.33px;
 }
@@ -899,6 +1038,15 @@
 .text-\[22px\] {
   font-size: 22px;
 }
+.text-\[24px\] {
+  font-size: 24px;
+}
+.text-\[26px\] {
+  font-size: 26px;
+}
+.text-\[28px\] {
+  font-size: 28px;
+}
 .text-\[42px\] {
   font-size: 42px;
 }
@@ -906,6 +1054,10 @@
   --tw-leading: 1.3;
   line-height: 1.3;
 }
+.leading-\[14px\] {
+  --tw-leading: 14px;
+  line-height: 14px;
+}
 .leading-\[20px\] {
   --tw-leading: 20px;
   line-height: 20px;
@@ -926,6 +1078,10 @@
   --tw-leading: 1;
   line-height: 1;
 }
+.font-\[9px\] {
+  --tw-font-weight: 9px;
+  font-weight: 9px;
+}
 .font-\[14px\] {
   --tw-font-weight: 14px;
   font-weight: 14px;
@@ -947,12 +1103,27 @@
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.text-\[\#1a1a1a\] {
+  color: #1a1a1a;
+}
+.text-\[\#4a4a4a\] {
+  color: #4a4a4a;
+}
 .text-\[\#9f9f9f\] {
   color: #9f9f9f;
 }
+.text-\[\#666\] {
+  color: #666;
+}
+.text-\[\#272727\] {
+  color: #272727;
+}
 .text-\[\#464647\] {
   color: #464647;
 }
+.text-\[\#FF8F45\] {
+  color: #FF8F45;
+}
 .text-\[\#c0c0c0\] {
   color: #c0c0c0;
 }
@@ -971,6 +1142,9 @@
 .text-\[red\] {
   color: red;
 }
+.text-\[white\] {
+  color: white;
+}
 .capitalize {
   text-transform: capitalize;
 }
@@ -990,9 +1164,16 @@
 .opacity-0 {
   opacity: 0%;
 }
+.opacity-50 {
+  opacity: 50%;
+}
 .opacity-100 {
   opacity: 100%;
 }
+.outline {
+  outline-style: var(--tw-outline-style);
+  outline-width: 1px;
+}
 .grayscale {
   --tw-grayscale: grayscale(100%);
   filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -1020,6 +1201,10 @@
   transition-timing-function: var(--tw-ease, ease);
   transition-duration: var(--tw-duration, 0s);
 }
+.duration-200 {
+  --tw-duration: 200ms;
+  transition-duration: 200ms;
+}
 .duration-300 {
   --tw-duration: 300ms;
   transition-duration: 300ms;
@@ -1028,6 +1213,11 @@
   --tw-outline-style: none;
   outline-style: none;
 }
+.select-none {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+       user-select: none;
+}
 .group-hover\:block {
   &:is(:where(.group):hover *) {
     @media (hover: hover) {
@@ -1167,6 +1357,19 @@
 .hide-scrollbar::-webkit-scrollbar {
   display: none;
 }
+.kupos-time-dd > summary {
+  list-style: none;
+}
+.kupos-time-dd > summary::-webkit-details-marker {
+  display: none;
+}
+.kupos-time-chevron {
+  transition: transform 200ms ease;
+  flex-shrink: 0;
+}
+.kupos-time-dd[open] .kupos-time-chevron {
+  transform: rotate(180deg);
+}
 .hide-scrollbar {
   -ms-overflow-style: none;
   scrollbar-width: none;
@@ -1239,6 +1442,11 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-blur {
   syntax: "*";
   inherits: false;
@@ -1330,6 +1538,7 @@
       --tw-numeric-figure: initial;
       --tw-numeric-spacing: initial;
       --tw-numeric-fraction: initial;
+      --tw-outline-style: solid;
       --tw-blur: initial;
       --tw-brightness: initial;
       --tw-contrast: initial;

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

@@ -14,7 +14,6 @@ interface ExpandedDropdownProps {
     ladiesBookedSeats?: string;
     isDpEnabled?: boolean;
     renderIcon?: any;
-    operatorLabel?: string;
 }
-declare function ExpandedDropdown({ serviceItem, isPeru, translation, getAnimationIcon, isChangeTicket, isSoldOut, ladiesBookedSeats, isDpEnabled, renderIcon, operatorLabel, }: ExpandedDropdownProps): React.ReactElement;
+declare function ExpandedDropdown({ serviceItem, isPeru, translation, getAnimationIcon, isChangeTicket, isSoldOut, ladiesBookedSeats, isDpEnabled, renderIcon, }: ExpandedDropdownProps): React.ReactElement;
 export default ExpandedDropdown;

package/dist/ui/ExpendedDropDown/ExpandedDropdown.js

@@ -1,5 +1,5 @@
 import React from "react";
-function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAnimationIcon, isChangeTicket = false, isSoldOut, ladiesBookedSeats, isDpEnabled, renderIcon, operatorLabel, }) {
+function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAnimationIcon, isChangeTicket = false, isSoldOut, ladiesBookedSeats, isDpEnabled, renderIcon, }) {
     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-[35px] relative -z-9", style: {
@@ -18,9 +18,7 @@ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAn
                         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) || 6,
                         " horas antes"),
                     " ",
-                    "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera",
-                    " ", operatorLabel !== null && operatorLabel !== void 0 ? operatorLabel : "kupospay",
-                    "."))) : (React.createElement("div", { className: "flex gap-[8px] text-[13.33px]" },
+                    "de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay."))) : (React.createElement("div", { className: "flex gap-[8px] text-[13.33px]" },
                 React.createElement("span", null, renderIcon("changeTicketIcon", "16px")),
                 React.createElement("span", null,
                     React.createElement("span", null,

package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js

@@ -29,14 +29,14 @@ const HARDCODED_OPERATORS = [
     },
 ];
 const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, selectedTimeSlot = TIME_SLOTS[0], onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData = undefined, }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     // Use wow_deal data if available, otherwise fall back to serviceItem operators or hardcoded
-    const operators = ((_a = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.operators) === null || _a === void 0 ? void 0 : _a.length) > 0
-        ? wowDealData.operators.map((op) => ({
-            logo: op.operator_logo_url,
-            name: op.operator_name,
-            time: op.starting_departure,
-            seatsAvailable: `${op.available_seats} disponibles`,
+    const operators = ((_a = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.services) === null || _a === void 0 ? void 0 : _a.length) > 0
+        ? wowDealData.services.slice(0, 3).map((service) => ({
+            logo: service.operator_logo_url,
+            name: service.operator_name,
+            time: service.departure_time,
+            seatsAvailable: `${service.available_seats} disponibles`,
         }))
         : ((_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operators) === null || _b === void 0 ? void 0 : _b.length) > 0
             ? serviceItem.operators
@@ -68,6 +68,16 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
         isFeatureDropDownExpand === true;
     const isThisTimeDropdownOpen = isTimeDropdownOpen === serviceItem.id;
     const canDecreaseTicketQuantity = ticketQuantity > 1;
+    const departures = (_d = (_c = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.services) === null || _c === void 0 ? void 0 : _c.map((s) => s.departure_time)) === null || _d === void 0 ? void 0 : _d.filter(Boolean);
+    let departureRange = `Entre ${dealWindowFrom} y ${dealWindowTo}`;
+    if (departures === null || departures === void 0 ? void 0 : departures.length) {
+        const sorted = [...departures].sort((a, b) => {
+            const [ah, am] = a.split(":").map(Number);
+            const [bh, bm] = b.split(":").map(Number);
+            return ah * 60 + am - (bh * 60 + bm);
+        });
+        departureRange = `Entre ${sorted[0]} y ${sorted[sorted.length - 1]}`;
+    }
     const HOW_IT_WORKS_STEPS = [
         {
             icon: "flexible",
@@ -142,41 +152,13 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
                     React.createElement("div", { className: " text-[white]" },
                         React.createElement("div", { className: "flex flex-col gap-[10px] relative" },
                             React.createElement("div", { className: "flex items-center gap-[6px]" },
-                                React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.whiteOrigin, alt: "origin", className: `w-[13px] h-[13px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
+                                React.createElement("img", { src: (_e = serviceItem.icons) === null || _e === void 0 ? void 0 : _e.whiteOrigin, alt: "origin", className: `w-[13px] h-[13px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
                                 React.createElement("span", { className: "text-[14px] bold-text" }, cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label.split(",")[0]),
                                 React.createElement("span", { className: "mx-[6px] text-[14px] bold-text" }, "\u2192"),
-                                React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.whiteDestination, alt: "destination", className: `w-[13px] h-[13px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
+                                React.createElement("img", { src: (_f = serviceItem.icons) === null || _f === void 0 ? void 0 : _f.whiteDestination, alt: "destination", className: `w-[13px] h-[13px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
                                 React.createElement("span", { className: "text-[14px] bold-text" }, cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label.split(",")[0])),
                             React.createElement("div", { className: "flex items-center gap-[6px]" },
-                                React.createElement("div", { className: "kupos-time-dd relative", tabIndex: 0, onBlur: (e) => {
-                                        if (!e.currentTarget.contains(e.relatedTarget)) {
-                                            onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(null);
-                                        }
-                                    }, style: { outline: "none" } },
-                                    React.createElement("button", { type: "button", onClick: () => onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(isThisTimeDropdownOpen ? null : serviceItem.id), className: "flex cursor-pointer select-none items-center gap-[6px] border-none bg-transparent p-0 bold-text text-[13px] text-[white]" },
-                                        React.createElement("span", null, displayTimeSlot),
-                                        React.createElement("img", { src: (_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _e === void 0 ? void 0 : _e.downArrow, alt: "down arrow", className: `kupos-time-chevron transition-transform duration-200 ${isThisTimeDropdownOpen ? "rotate-180" : "rotate-0"}`, style: {
-                                                width: "12px",
-                                                height: "8px",
-                                                filter: "brightness(0) invert(1)",
-                                            } })),
-                                    isThisTimeDropdownOpen && (React.createElement(React.Fragment, null,
-                                        React.createElement("div", { className: "absolute left-0 top-[calc(100%+10px)]", style: {
-                                                zIndex: 20,
-                                                backgroundColor: "#fff",
-                                                borderRadius: "14px",
-                                                minWidth: "190px",
-                                                boxShadow: "0 8px 32px rgba(0,0,0,0.28)",
-                                                overflow: "hidden",
-                                                padding: "6px 0",
-                                            } }, TIME_SLOTS.map((slot) => {
-                                            const isActive = slot === selectedTimeSlot;
-                                            return (React.createElement("button", { key: slot, type: "button", onClick: () => {
-                                                    onTimeSlotChange === null || onTimeSlotChange === void 0 ? void 0 : onTimeSlotChange(slot);
-                                                    onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(null);
-                                                }, className: `flex w-full cursor-pointer items-center gap-[10px] border-none px-[12px] py-[9px] text-left text-[13px] ${isActive ? "bg-[#FF5C60] font-bold text-[white]" : "bg-transparent font-normal text-[#1a1a1a]"}` },
-                                                React.createElement("span", null, slot)));
-                                        })))))))),
+                                React.createElement("div", { className: "bold-text text-[12px] text-white" }, departureRange)))),
                     React.createElement("div", { className: "border-t border-[#363c48] my-[8px]" }),
                     React.createElement("div", null,
                         React.createElement("span", { className: "block w-full text-[14px] bold-text text-[white] mb-[10px]", style: { textAlign: "center" } },
@@ -238,8 +220,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
                             } },
                             React.createElement("div", { className: "flex flex-col" },
                                 React.createElement("span", { className: "text-[18px] font-normal leading-[20px] text-[#9f9f9f] relative", style: { position: "relative" } },
-                                    "$",
-                                    originalPrice.toLocaleString(),
+                                    `$${((originalPrice * ticketQuantity)).toLocaleString()}`,
                                     React.createElement("span", { style: {
                                             position: "absolute",
                                             left: "-2px",
@@ -265,7 +246,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
                             React.createElement(LottiePlayer, { animationData: serviceItem.icons.thunderAnim, width: "16px", height: "16px" }),
                             React.createElement("span", { className: "whitespace-nowrap" }, "\u00A1Lo quiero!")),
                         React.createElement("div", { className: "flex justify-end mt-[10px]", onClick: onToggleExpand },
-                            React.createElement("img", { src: (_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _f === void 0 ? void 0 : _f.downArrow, alt: "down arrow", className: `transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, style: {
+                            React.createElement("img", { src: (_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _g === void 0 ? void 0 : _g.downArrow, alt: "down arrow", className: `transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, style: {
                                     width: "14px",
                                     height: "8px",
                                     filter: "brightness(0) invert(1)",