kupos-ui-components-lib 9.7.10 → 9.8.1

package/dist/styles.css

@@ -60,15 +60,9 @@
 .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);
 }
@@ -81,9 +75,6 @@
 .-bottom-\[36px\] {
   bottom: calc(36px * -1);
 }
-.bottom-\[11px\] {
-  bottom: 11px;
-}
 .bottom-\[35px\] {
   bottom: 35px;
 }
@@ -177,18 +168,9 @@
 .m-\[auto\] {
   margin: auto;
 }
-.mx-\[10px\] {
-  margin-inline: 10px;
-}
 .mx-auto {
   margin-inline: auto;
 }
-.my-\[8px\] {
-  margin-block: 8px;
-}
-.my-\[14px\] {
-  margin-block: 14px;
-}
 .-mt-\[15px\] {
   margin-top: calc(15px * -1);
 }
@@ -207,27 +189,15 @@
 .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;
 }
@@ -375,9 +345,6 @@
 .h-\[30px\] {
   height: 30px;
 }
-.h-\[34px\] {
-  height: 34px;
-}
 .h-\[100\%\] {
   height: 100%;
 }
@@ -414,9 +381,6 @@
 .w-\[20px\] {
   width: 20px;
 }
-.w-\[34px\] {
-  width: 34px;
-}
 .w-\[50\%\] {
   width: 50%;
 }
@@ -485,12 +449,6 @@
 .max-w-\[165px\] {
   max-width: 165px;
 }
-.max-w-\[220px\] {
-  max-width: 220px;
-}
-.max-w-full {
-  max-width: 100%;
-}
 .min-w-\[75px\] {
   min-width: 75px;
 }
@@ -512,9 +470,6 @@
   --tw-translate-y: -10px;
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
-.rotate-0 {
-  rotate: 0deg;
-}
 .rotate-180 {
   rotate: 180deg;
 }
@@ -524,9 +479,6 @@
 .cursor-default {
   cursor: default;
 }
-.cursor-not-allowed {
-  cursor: not-allowed;
-}
 .cursor-pointer {
   cursor: pointer;
 }
@@ -539,21 +491,12 @@
 .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;
 }
@@ -581,9 +524,6 @@
 .items-start {
   align-items: flex-start;
 }
-.items-stretch {
-  align-items: stretch;
-}
 .justify-between {
   justify-content: space-between;
 }
@@ -626,12 +566,6 @@
 .gap-\[14px\] {
   gap: 14px;
 }
-.gap-\[16px\] {
-  gap: 16px;
-}
-.gap-\[20px\] {
-  gap: 20px;
-}
 .gap-x-\[2\%\] {
   -moz-column-gap: 2%;
        column-gap: 2%;
@@ -640,20 +574,12 @@
   -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;
 }
@@ -666,9 +592,6 @@
 .rounded-\[15px\] {
   border-radius: 15px;
 }
-.rounded-\[16px\] {
-  border-radius: 16px;
-}
 .rounded-\[18px\] {
   border-radius: 18px;
 }
@@ -712,10 +635,6 @@
   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;
@@ -744,10 +663,6 @@
   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;
@@ -764,9 +679,6 @@
   --tw-border-style: none;
   border-style: none;
 }
-.border-\[\#363c48\] {
-  border-color: #363c48;
-}
 .border-\[\#ccc\] {
   border-color: #ccc;
 }
@@ -785,24 +697,9 @@
 .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;
 }
@@ -821,9 +718,6 @@
 .bg-\[lightgray\] {
   background-color: lightgray;
 }
-.bg-transparent {
-  background-color: transparent;
-}
 .bg-\[length\:200\%_200\%\] {
   background-size: 200% 200%;
 }
@@ -846,9 +740,6 @@
 .p-\[10px_15px\] {
   padding: 10px 15px;
 }
-.p-\[14px\] {
-  padding: 14px;
-}
 .p-\[15px\] {
   padding: 15px;
 }
@@ -882,18 +773,9 @@
 .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;
 }
@@ -906,9 +788,6 @@
 .py-\[8px\] {
   padding-block: 8px;
 }
-.py-\[9px\] {
-  padding-block: 9px;
-}
 .py-\[10px\] {
   padding-block: 10px;
 }
@@ -924,9 +803,6 @@
 .pt-\[10px\] {
   padding-top: 10px;
 }
-.pt-\[14px\] {
-  padding-top: 14px;
-}
 .pt-\[20px\] {
   padding-top: 20px;
 }
@@ -942,9 +818,6 @@
 .pt-\[50px\] {
   padding-top: 50px;
 }
-.pr-\[10px\] {
-  padding-right: 10px;
-}
 .pr-\[15px\] {
   padding-right: 15px;
 }
@@ -954,9 +827,6 @@
 .pr-\[22px\] {
   padding-right: 22px;
 }
-.pb-\[6px\] {
-  padding-bottom: 6px;
-}
 .pb-\[7px\] {
   padding-bottom: 7px;
 }
@@ -975,9 +845,6 @@
 .pl-\[6px\] {
   padding-left: 6px;
 }
-.pl-\[22px\] {
-  padding-left: 22px;
-}
 .text-center {
   text-align: center;
 }
@@ -1023,21 +890,9 @@
 .text-\[18px\] {
   font-size: 18px;
 }
-.text-\[20px\] {
-  font-size: 20px;
-}
 .text-\[22px\] {
   font-size: 22px;
 }
-.text-\[25px\] {
-  font-size: 25px;
-}
-.text-\[26px\] {
-  font-size: 26px;
-}
-.text-\[28px\] {
-  font-size: 28px;
-}
 .text-\[42px\] {
   font-size: 42px;
 }
@@ -1045,10 +900,6 @@
   --tw-leading: 1.3;
   line-height: 1.3;
 }
-.leading-\[14px\] {
-  --tw-leading: 14px;
-  line-height: 14px;
-}
 .leading-\[20px\] {
   --tw-leading: 20px;
   line-height: 20px;
@@ -1069,10 +920,6 @@
   --tw-leading: 1;
   line-height: 1;
 }
-.font-\[9px\] {
-  --tw-font-weight: 9px;
-  font-weight: 9px;
-}
 .font-\[14px\] {
   --tw-font-weight: 14px;
   font-weight: 14px;
@@ -1094,27 +941,12 @@
 .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;
 }
@@ -1133,9 +965,6 @@
 .text-\[red\] {
   color: red;
 }
-.text-\[white\] {
-  color: white;
-}
 .capitalize {
   text-transform: capitalize;
 }
@@ -1155,16 +984,9 @@
 .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,);
@@ -1192,10 +1014,6 @@
   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;
@@ -1204,11 +1022,6 @@
   --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) {
@@ -1348,19 +1161,6 @@
 .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;
@@ -1433,11 +1233,6 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
 @property --tw-blur {
   syntax: "*";
   inherits: false;
@@ -1529,7 +1324,6 @@
       --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/FeaturServiceUiMobile/FeatureServiceUiMobile.js

@@ -1,6 +1,7 @@
 import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
 import commonService from "../../utils/CommonService";
+import flameAnimation from "../../assets/images/anims/service_list/flame_anim.json";
 const TIME_SLOTS = [
     "Entre 07:00 AM y 10:00 AM",
     "Entre 11:00 AM y 14:00 AM",
@@ -152,7 +153,10 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
                                         })))))))),
                     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" } }, "3 operadores compitiendo por tu compra"),
+                        React.createElement("span", { className: "block w-full text-[14px] bold-text text-[white] mb-[10px]", style: { textAlign: "center" } },
+                            "3 operadores compitiendo ",
+                            React.createElement("br", null),
+                            "por tu compra"),
                         React.createElement("div", { className: "flex gap-[8px] text-[white]", style: { width: "100%" } }, operators.map((op, idx) => (React.createElement("div", { key: idx, className: "flex min-w-0 flex-col items-center justify-center gap-[8px] rounded-[8px]", style: {
                                 flex: 1,
                                 minWidth: 0,
@@ -163,7 +167,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
                             } },
                             React.createElement("img", { src: serviceItem.operator_details[0], alt: op.name, className: `h-[24px] max-w-full object-contain ${isSoldOut ? "grayscale" : ""}` }),
                             React.createElement("span", { className: "text-[12px] truncate max-w-full text-center " }, serviceItem.operator_details[2]),
-                            React.createElement("span", { className: "text-[11px] mt-[6px] whitespace-nowrap" }, op === null || op === void 0 ? void 0 : op.seatsAvailable))))),
+                            React.createElement("span", { className: "text-[11px] whitespace-nowrap" }, op === null || op === void 0 ? void 0 : op.seatsAvailable))))),
                         React.createElement("div", { className: "flex w-full items-center justify-center gap-[6px] text-[12px] mt-[12px]", style: {
                                 border: "1px solid #363c48",
                                 backgroundColor: "#1a202e",
@@ -248,11 +252,12 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
                         React.createElement("div", { className: "flex flex-col" },
                             React.createElement("span", { className: "bold-text" }, step.name),
                             React.createElement("span", null, step.text)))))))))),
-        React.createElement("div", { className: "absolute -top-[11px] left-0  w-full flex items-center justify-center gap-[12px]  z-10 " },
+        React.createElement("div", { className: "absolute -top-[13px] left-0  w-full flex items-center justify-center gap-[12px]  z-10 " },
             React.createElement("div", { className: "flex items-center gap-[6px] py-[5px] px-[14px] rounded-[38px] text-[12.5px] bg-[#FF8F45] text-white whitespace-nowrap" },
                 React.createElement("span", { className: "flex items-center" },
-                    React.createElement(LottiePlayer, { animationData: serviceItem.icons.bombAnim, width: "14px", height: "14px" }),
-                    React.createElement("span", { className: "bold-text ml-[5px] text-[white]" }, "Remate\u00A0"),
+                    React.createElement("div", { className: "mb-[2px]" },
+                        React.createElement(LottiePlayer, { animationData: flameAnimation, width: "16px", height: "16px" })),
+                    React.createElement("span", { className: "bold-text text-[white] ml-[3px]" }, "Remate\u00A0"),
                     " ",
                     React.createElement("span", { className: "text-[white]" }, "t\u00E9rmina en"),
                     " ",

package/dist/ui/FeatureServiceUI/FeatureServiceUi.js

@@ -28,7 +28,7 @@ const HARDCODED_OPERATORS = [
     },
 ];
 const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e;
     const operators = ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operators) === null || _a === void 0 ? void 0 : _a.length) > 0
         ? serviceItem.operators
         : HARDCODED_OPERATORS;
@@ -97,8 +97,13 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
                             whiteSpace: "nowrap",
                         } },
                         React.createElement("span", null, "AHORRAS 60%"))),
-                React.createElement("span", null,
-                    React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.fireIcon, alt: "fire", className: "w-[14px] h-[14px] mb-[4px] mr-[4px]" }),
+                React.createElement("div", { className: "flex items-center" },
+                    React.createElement("div", { className: "mb-[2px]" },
+                        React.createElement(LottiePlayer
+                        // animationData={serviceItem.icons.flexibleAnim}
+                        , { 
+                            // animationData={serviceItem.icons.flexibleAnim}
+                            animationData: getAnimationIcon("flameAnimation"), width: "18px", height: "18px" })),
                     React.createElement("span", { className: "bold-text" }, "Remate"),
                     " t\u00E9rmina en",
                     " ",
@@ -113,10 +118,10 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
                     React.createElement("div", { className: "flex flex-col justify-between gap-[20px] my-[14px] pr-[22px]" },
                         React.createElement("div", { className: "flex flex-col gap-[8px]" },
                             React.createElement("div", { className: "flex items-center gap-[8px]" },
-                                React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.whiteOrigin, alt: "origin", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
+                                React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.whiteOrigin, alt: "origin", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
                                 React.createElement("span", { className: "text-[13px] bold-text" }, cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label.split(",")[0])),
                             React.createElement("div", { className: "flex items-center gap-[8px]" },
-                                React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.whiteDestination, alt: "destination", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
+                                React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.whiteDestination, alt: "destination", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
                                 React.createElement("span", { className: "text-[13px] bold-text" }, cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label.split(",")[0]))),
                         React.createElement("div", { className: "flex flex-col gap-[8px]" },
                             React.createElement("div", { className: "text-[12px] bold-text" }, "Viernes 23 de mayo"),
@@ -127,7 +132,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
                                 }, style: { outline: "none" } },
                                 React.createElement("button", { type: "button", onClick: () => onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(isThisTimeDropdownOpen ? null : serviceItem.id), className: "flex whitespace-nowrap cursor-pointer select-none items-center gap-[6px] border-none bg-transparent p-0 bold-text text-[12px] text-[white]" },
                                     React.createElement("span", null, selectedTimeSlot),
-                                    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: {
+                                    React.createElement("img", { src: (_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _d === void 0 ? void 0 : _d.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)",
@@ -162,7 +167,10 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
                                     } }, "Tu compra est\u00E1 100% asegurada.")))),
                     React.createElement("div", { className: "min-w-0 px-[22px] flex flex-col items-center justify-between gap-[16px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]" },
                         React.createElement("div", { className: "text-center" },
-                            React.createElement("div", { className: "bold-text text-[14px]" }, "3 operadores compitiendo por tu compra")),
+                            React.createElement("div", { className: "bold-text text-[14px]" },
+                                "3 operadores compitiendo",
+                                React.createElement("br", null),
+                                " por tu compra")),
                         React.createElement("div", { className: "grid w-full grid-cols-3 items-stretch gap-[14px] mb-[12px]" }, operators.map((op, idx) => (React.createElement("div", { key: idx, className: "flex min-w-0 flex-col items-center justify-center gap-[8px] rounded-[8px]", style: {
                                 // height: "80px",
                                 border: "1px solid #363c48",
@@ -245,7 +253,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
                                 animationData: getAnimationIcon("thunderAnimation"), width: "18px", height: "18px" }),
                             React.createElement("span", { className: "whitespace-nowrap" }, "\u00A1Lo quiero!"))),
                     React.createElement("div", { className: `absolute bottom-[11px] right-[18px] cursor-pointer transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, onClick: onToggleExpand },
-                        React.createElement("img", { src: (_f = serviceItem.icons) === null || _f === void 0 ? void 0 : _f.downArrow, alt: "down arrow", style: {
+                        React.createElement("img", { src: (_e = serviceItem.icons) === null || _e === void 0 ? void 0 : _e.downArrow, alt: "down arrow", style: {
                                 width: "14px",
                                 height: "8px",
                                 filter: "brightness(0) invert(1)",

package/dist/ui/SeatSection/SeatSection.d.ts

@@ -16,6 +16,10 @@ interface SeatSectionProps {
     serviceItem?: any;
     renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
     discountSeatPriceColor?: string;
+    isTrain?: boolean;
+    selectedSeatKey?: any;
+    onSeatSelect?: (key: any, price: number) => void;
+    topLabelColor?: string;
 }
-declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, }: SeatSectionProps): React.ReactElement;
+declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isTrain, topLabelColor, }: SeatSectionProps): React.ReactElement;
 export default SeatSection;

package/dist/ui/SeatSection/SeatSection.js

@@ -8,6 +8,7 @@ function getAllSeatTypes(seatTypes) {
     let seatTypesWithPrices = seatTypes.filter(Boolean).map((val) => ({
         label: val === null || val === void 0 ? void 0 : val.label,
         price: val === null || val === void 0 ? void 0 : val.fare,
+        key: val === null || val === void 0 ? void 0 : val.key,
     }));
     seatTypesWithPrices.sort((a, b) => a.price - b.price);
     return seatTypesWithPrices;
@@ -54,7 +55,7 @@ function getUniqueSeats(seatTypes) {
 function getNumberOfSeats(seatTypes) {
     return seatTypes.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
 }
-function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, }) {
+function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isTrain, topLabelColor, }) {
     var _a;
     const uniqueSeats = getUniqueSeats(seatTypes);
     const sortedSeatTypes = getSortedSeatTypes(seatTypes);
@@ -65,11 +66,30 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
         : CommonService.currency(price, currencySign);
     const renderSeatNames = () => {
         const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
-        return seats.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"
-            ? removeDuplicateSeats && isPeru
-                ? CommonService.truncateSeatLabel(val.label)
-                : val.label
-            : null)));
+        return seats.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("div", { className: "flex items-center", style: isTrain ? { cursor: "pointer" } : undefined, onClick: isTrain && !isSoldOut
+                ? () => onSeatSelect === null || onSeatSelect === void 0 ? void 0 : onSeatSelect(val.label, val.price)
+                : undefined },
+            isTrain && (React.createElement("div", { style: {
+                    border: `1px solid ${val.label === selectedSeatKey ? topLabelColor : "#ccc"}`,
+                    borderRadius: "50%",
+                    width: "14px",
+                    height: "14px",
+                    minWidth: "14px",
+                    marginRight: "10px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                } }, val.label === selectedSeatKey && (React.createElement("div", { style: {
+                    backgroundColor: topLabelColor,
+                    borderRadius: "50%",
+                    width: "7px",
+                    height: "7px",
+                } })))),
+            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"
+                ? removeDuplicateSeats && isPeru
+                    ? CommonService.truncateSeatLabel(val.label)
+                    : val.label
+                : null))));
     };
     const renderSeatPrices = () => {
         if (isPeru) {