kupos-ui-components-lib 9.9.9 → 9.10.0

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -148,12 +148,12 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
             // zIndex: 1,
         }
         : {};
-    const renderIcon = (iconKey, size = "14px") => {
+    const renderIcon = (iconKey, size = "14px", styles) => {
         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}]`} ` }));
+                return (React.createElement("img", { src: iconValue, alt: iconKey, className: `${`w-[${size}] h-[${size}]`} `, style: Object.assign({}, (styles || {})) }));
             }
         }
         return null;
@@ -275,10 +275,10 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
             setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
                 isFeatureDropDownExpand === true
                 ? null
-                : serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText || hasDpEnabled ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
+                : serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText || hasDpEnabled || isNewUiEnabled ? "mb-[55px]" : "mb-[10px]"} ${(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-[24px]"
+            ? "mt-[30px]"
             : "mt-[20px]"}	` },
         ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled) && !isSoldOut && (React.createElement(OfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon, showLoginOption: showLoginOption, isNewUiEnabled: isNewUiEnabled, colors: colors })),
         React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${(hasOfferText && isNewUiEnabled && !isSoldOut) || hasDpEnabled

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -75,12 +75,12 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
         });
         return nodes;
     };
-    const renderIcon = (iconKey, size = "14px") => {
+    const renderIcon = (iconKey, size = "14px", styles) => {
         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]`, style: { filter: isSoldOut ? "grayscale" : "" } }));
+                return (React.createElement("img", { src: iconValue, alt: iconKey, className: `${`w-[${size}] h-[${size}]`} mr-[5px]`, style: Object.assign({ filter: isSoldOut ? "grayscale" : "" }, (styles || {})) }));
             }
         }
         return null;
@@ -104,7 +104,12 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                 !isSoldOut
                 ? "rounded-[18px]"
                 : "rounded-[10px] border border-[#ccc]"}`, style: Object.assign(Object.assign({}, serviceCardStyle), { backgroundColor: "#fff" }) },
-            React.createElement("div", { style: { padding: "12px 12px 8px 12px" } },
+            React.createElement("div", { style: {
+                    padding: "12px 12px 8px 12px",
+                    marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && showTopLabel && isConexion
+                        ? " 10px"
+                        : "",
+                } },
                 React.createElement("div", { className: "flex justify-between  items-center mb-[10px]" },
                     React.createElement("div", { className: "flex items-center justify-center gap-x-4", style: {
                             marginBottom: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDiscount ? "10px" : "",

package/dist/components/Survey/SurveyDesktop.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { SurveyProps } from "./types";
-declare const SurveyDesktop: ({ isOpen, isSubmitted, selectedScore, onScoreChange, feedback, onFeedbackChange, onClose, onSkip, onSubmit, colors, }: SurveyProps) => React.JSX.Element;
+declare const SurveyDesktop: ({ isOpen, isSubmitted, selectedScore, onScoreChange, feedback, onFeedbackChange, onClose, onSkip, onSubmit, colors, icons, isLoading, }: SurveyProps) => React.JSX.Element;
 export default SurveyDesktop;

package/dist/components/Survey/SurveyDesktop.js

@@ -1,7 +1,8 @@
 import React from "react";
 import { Modal } from "../../ui/Modal";
-import { ThankYouCard, SurveyHeader, ScoreButtons, FeedbackBanner, FeedbackTextarea, SurveyFooter, getFeedbackConfig, } from "../../ui/Survey";
-const SurveyDesktop = ({ isOpen, isSubmitted, selectedScore, onScoreChange, feedback = "", onFeedbackChange, onClose, onSkip, onSubmit, colors, }) => {
+import { ThankYouCard, ScoreButtons, FeedbackTextarea, getFeedbackConfig, } from "../../ui/Survey";
+import KuposButton from "../../ui/KuposButton/KuposButton";
+const SurveyDesktop = ({ isOpen, isSubmitted, selectedScore, onScoreChange, feedback = "", onFeedbackChange, onClose, onSkip, onSubmit, colors, icons, isLoading, }) => {
     if (!isOpen)
         return null;
     const config = getFeedbackConfig(selectedScore);
@@ -10,27 +11,20 @@ const SurveyDesktop = ({ isOpen, isSubmitted, selectedScore, onScoreChange, feed
             onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(selectedScore, feedback);
         }
     };
-    return (React.createElement(Modal, { isOpen: isOpen, onClose: onClose, variant: "center", size: "lg", maxWidth: 640, padding: isSubmitted ? 0 : "32px 36px 28px", borderRadius: 24, closeOnBackdrop: false }, isSubmitted ? (React.createElement(ThankYouCard, { onClose: onClose })) : (React.createElement(React.Fragment, null,
-        React.createElement(SurveyHeader, { onClose: onClose }),
-        React.createElement("h2", { style: {
-                fontSize: "22px",
-                lineHeight: 1.25,
-                color: colors === null || colors === void 0 ? void 0 : colors.primaryColor,
-            } },
-            "\u00BFQu\u00E9 tan probable es que",
-            " ",
-            React.createElement("em", { style: {
-                    color: colors === null || colors === void 0 ? void 0 : colors.secondaryColor,
-                } }, "recomiendes"),
-            " ",
-            "a un amigo?"),
-        React.createElement("p", { className: "text-[13.33px]", style: {
-                color: colors === null || colors === void 0 ? void 0 : colors.primaryColor,
-                marginBottom: 20,
-            } }, "Pulsa un n\u00FAmero: 1 significa en absoluto, 10 significa absolutamente."),
-        React.createElement(ScoreButtons, { selectedScore: selectedScore, onScoreChange: onScoreChange, buttonHeight: 54, fontSize: 15 }),
-        React.createElement(FeedbackBanner, { config: config }),
-        React.createElement(FeedbackTextarea, { config: config, feedback: feedback, onFeedbackChange: onFeedbackChange }),
-        React.createElement(SurveyFooter, { selectedScore: selectedScore, onSkip: onSkip, onSubmit: handleSubmit, colors: colors })))));
+    return (React.createElement(Modal, { isOpen: isOpen, onClose: onClose, variant: "center", size: "lg", maxWidth: 550, padding: isSubmitted ? 0 : "40px 48px 36px", borderRadius: 28, closeOnBackdrop: false }, isSubmitted ? (React.createElement(ThankYouCard, { onClose: onClose })) : (React.createElement(React.Fragment, null,
+        React.createElement("button", { onClick: onClose, "aria-label": "Close survey", className: "absolute top-[15px] right-[25px] bg-transparent border-none cursor-pointer text-[22px] text-gray-400 flex items-center justify-center p-1 z-10 transition-colors duration-200 hover:text-gray-600" },
+            React.createElement("img", { src: icons.closeIcon, alt: "Close", className: "w-[16px] h-[16px] block" })),
+        (icons === null || icons === void 0 ? void 0 : icons.surveyIcon) && (React.createElement("div", { className: "flex justify-center mb-3 mt-2" },
+            React.createElement("img", { src: icons.surveyIcon, alt: "Survey Illustration", className: "w-[90px] h-[90px] block" }))),
+        React.createElement("h2", { className: "text-[18px] bold-text leading-[1.25]  text-center mt-4 mb-2" }, "Ay\u00FAdanos a mejorar"),
+        React.createElement("p", { className: "text-[13.33px] text-center leading-[1.4] mb-6 max-w-[460px] mx-auto" },
+            "Bas\u00E1ndote en tu experiencia de compra.",
+            React.createElement("br", null),
+            "\u00BFNos recomendar\u00EDas a un amigo?"),
+        React.createElement(ScoreButtons, { selectedScore: selectedScore, onScoreChange: onScoreChange, buttonHeight: 45, fontSize: 15, colors: colors }),
+        React.createElement(FeedbackTextarea, { config: config, feedback: feedback, onFeedbackChange: onFeedbackChange, colors: colors }),
+        React.createElement("div", { className: "flex justify-center mt-[20px]" },
+            React.createElement("div", { className: "w-[180px]" },
+                React.createElement(KuposButton, { isSoldOut: selectedScore == null, isLoading: isLoading || false, buttonColor: "#FF8E43", buyLabel: "Enviar", soldOutLabel: "Enviar", onClick: handleSubmit })))))));
 };
 export default SurveyDesktop;

package/dist/components/Survey/SurveyMobile.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { SurveyProps } from "./types";
-declare const SurveyMobile: ({ isOpen, isSubmitted, selectedScore, onScoreChange, feedback, onFeedbackChange, onClose, onSkip, onSubmit, colors, }: SurveyProps) => React.JSX.Element;
+declare const SurveyMobile: ({ isOpen, isSubmitted, selectedScore, onScoreChange, feedback, onFeedbackChange, onClose, onSkip, onSubmit, colors, icons, isLoading, }: SurveyProps) => React.JSX.Element;
 export default SurveyMobile;

package/dist/components/Survey/SurveyMobile.js

@@ -1,7 +1,8 @@
 import React from "react";
 import { BottomSheet } from "../../ui/BottomSheet";
-import { ThankYouCard, SurveyHeader, ScoreButtons, FeedbackBanner, FeedbackTextarea, SurveyFooter, getFeedbackConfig, } from "../../ui/Survey";
-const SurveyMobile = ({ isOpen, isSubmitted, selectedScore, onScoreChange, feedback = "", onFeedbackChange, onClose, onSkip, onSubmit, colors, }) => {
+import { ThankYouCard, ScoreButtons, FeedbackTextarea, getFeedbackConfig, } from "../../ui/Survey";
+import KuposButton from "../../ui/KuposButton/KuposButton";
+const SurveyMobile = ({ isOpen, isSubmitted, selectedScore, onScoreChange, feedback = "", onFeedbackChange, onClose, onSkip, onSubmit, colors, icons, isLoading, }) => {
     if (!isOpen)
         return null;
     const config = getFeedbackConfig(selectedScore);
@@ -11,29 +12,19 @@ const SurveyMobile = ({ isOpen, isSubmitted, selectedScore, onScoreChange, feedb
         }
     };
     return (React.createElement(BottomSheet, { isOpen: isOpen !== null && isOpen !== void 0 ? isOpen : false, onClose: onClose, showHandle: true, showBackdrop: false, blurBackground: true, blurAmount: "2px", padding: isSubmitted ? 0 : "0 20px 32px" }, isSubmitted ? (React.createElement(ThankYouCard, { onClose: onClose, titleFontSize: "1.35rem" })) : (React.createElement(React.Fragment, null,
-        React.createElement(SurveyHeader, { onClose: onClose }),
-        React.createElement("h2", { style: {
-                fontSize: "1.35rem",
-                fontWeight: 800,
-                lineHeight: 1.3,
-                color: colors === null || colors === void 0 ? void 0 : colors.primaryColor,
-                marginBottom: 12,
-            } },
-            "\u00BFQu\u00E9 tan probable es que",
-            " ",
-            React.createElement("em", { style: {
-                    color: colors === null || colors === void 0 ? void 0 : colors.secondaryColor,
-                } }, "recomiendes"),
-            " ",
-            "a un amigo?"),
-        React.createElement("p", { style: {
-                fontSize: "13.33px",
-                color: colors === null || colors === void 0 ? void 0 : colors.primaryColor,
-                marginBottom: 16,
-            } }, "Pulsa un n\u00FAmero: 1 significa en absoluto, 10 significa absolutamente."),
-        React.createElement(ScoreButtons, { selectedScore: selectedScore, onScoreChange: onScoreChange, buttonHeight: 44, fontSize: 13, gap: 6 }),
-        React.createElement(FeedbackBanner, { config: config }),
+        React.createElement("button", { onClick: onClose, "aria-label": "Close survey", className: "absolute top-[15px] right-[25px] bg-transparent border-none cursor-pointer text-[22px] text-gray-400 flex items-center justify-center p-1 z-10 transition-colors duration-200 hover:text-gray-600" },
+            React.createElement("img", { src: icons.closeIcon, alt: "Close", className: "w-[16px] h-[16px] block" })),
+        (icons === null || icons === void 0 ? void 0 : icons.surveyIcon) && (React.createElement("div", { className: "flex justify-center mb-3 mt-2" },
+            React.createElement("img", { src: icons.surveyIcon, alt: "Survey Illustration", className: "w-[90px] h-[90px] block" }))),
+        React.createElement("h2", { className: "text-[18px] bold-text leading-[1.25]  text-center mt-4 mb-2" }, "Ay\u00FAdanos a mejorar"),
+        React.createElement("p", { className: "text-[13.33px] text-center leading-[1.4] mb-6 max-w-[460px] mx-auto" },
+            "Bas\u00E1ndote en tu experiencia de compra.",
+            React.createElement("br", null),
+            "\u00BFNos recomendar\u00EDas a un amigo?"),
+        React.createElement(ScoreButtons, { selectedScore: selectedScore, onScoreChange: onScoreChange, buttonHeight: 44, fontSize: 13, gap: 6, colors: colors }),
         React.createElement(FeedbackTextarea, { config: config, feedback: feedback, onFeedbackChange: onFeedbackChange }),
-        React.createElement(SurveyFooter, { selectedScore: selectedScore, onSkip: onSkip, onSubmit: handleSubmit, colors: colors, layout: "stacked" })))));
+        React.createElement("div", { className: "flex justify-center mt-[20px]" },
+            React.createElement("div", { className: "w-[180px]" },
+                React.createElement(KuposButton, { isSoldOut: selectedScore == null, isLoading: isLoading || false, buttonColor: "#FF8E43", buyLabel: "Enviar", soldOutLabel: "Enviar", onClick: handleSubmit })))))));
 };
 export default SurveyMobile;

package/dist/components/Survey/types.d.ts

@@ -15,4 +15,8 @@ export interface SurveyProps {
         tertiaryColor?: string;
         primaryColor?: string;
     };
+    icons?: {
+        surveyIcon?: string;
+        closeIcon?: string;
+    };
 }

package/dist/styles.css

@@ -33,6 +33,9 @@
 .-top-\[11px\] {
   top: calc(11px * -1);
 }
+.-top-\[12px\] {
+  top: calc(12px * -1);
+}
 .-top-\[13px\] {
   top: calc(13px * -1);
 }
@@ -237,6 +240,9 @@
 .mt-\[24px\] {
   margin-top: 24px;
 }
+.mt-\[30px\] {
+  margin-top: 30px;
+}
 .-mr-\[12px\] {
   margin-right: calc(12px * -1);
 }
@@ -855,9 +861,6 @@
 .p-\[15px\] {
   padding: 15px;
 }
-.p-\[15px_15px\] {
-  padding: 15px 15px;
-}
 .p-\[16px_20px\] {
   padding: 16px 20px;
 }

package/dist/ui/OfferBanner.js

@@ -3,7 +3,7 @@ import LottiePlayer from "../assets/LottiePlayer";
 import CommonService from "../utils/CommonService";
 const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, renderIcon, isLoggedIn, showLoginModal, viewersConfig, getAnimationIcon, showLoginOption, isNewUiEnabled, colors, }) => {
     var _a, _b, _c, _d;
-    return (React.createElement("div", { className: "text-white p-[15px_15px] text-left w-full flex items-center absolute -bottom-[44px] pt-[50px]  rounded-b-[14px] text-[14px] mt-[10px]", style: {
+    return (React.createElement("div", { className: "text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[44px] pt-[50px]  rounded-b-[14px] text-[14px] mt-[10px]", style: {
             background: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && !isNewUiEnabled
                 ? colors === null || colors === void 0 ? void 0 : colors.bottomStripColor
                 : offerGradient,

package/dist/ui/SeatSection/SeatSection.js

@@ -95,7 +95,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
                     ? removeDuplicateSeats && isPeru
                         ? CommonService.truncateSeatLabel(val.label)
                         : isTrain
-                            ? CommonService.truncateSeatLabel(val.label, 8)
+                            ? CommonService.truncateSeatLabel(CommonService.capitalize(String(val.label)), 8)
                             : val.label
                     : null)));
         });

package/dist/ui/ServiceBadges/ServiceBadges.d.ts

@@ -3,7 +3,7 @@ interface ServiceBadgesProps {
     showTopLabel?: string;
     isSoldOut: boolean;
     colors: any;
-    renderIcon: (iconKey: string, size?: string) => React.ReactNode;
+    renderIcon: (iconKey: string, size?: string, styles?: any) => React.ReactNode;
     translation?: {
         directService?: string;
     };

package/dist/ui/ServiceBadges/ServiceBadges.js

@@ -8,7 +8,9 @@ const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translatio
                     : `1px solid ${colors.topLabelColor}`,
                 color: isSoldOut ? "#ccc" : colors.topLabelColor,
             } },
-            React.createElement("div", { className: isSoldOut ? "grayscale" : "" }, renderIcon("specialDeparture", "12px")),
+            renderIcon("specialDeparture", "12px", {
+                filter: isSoldOut ? "grayscale(0.5)" : "",
+            }),
             React.createElement("div", null, showTopLabel))),
         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
                 backgroundColor: "#fff",

package/dist/ui/Survey/FeedbackTextarea.d.ts

@@ -4,6 +4,9 @@ interface FeedbackTextareaProps {
     config: FeedbackConfig | null;
     feedback: string;
     onFeedbackChange?: (text: string) => void;
+    colors?: {
+        primaryColor?: string;
+    };
 }
-declare const FeedbackTextarea: ({ config, feedback, onFeedbackChange, }: FeedbackTextareaProps) => React.JSX.Element;
+declare const FeedbackTextarea: ({ config, feedback, onFeedbackChange, colors, }: FeedbackTextareaProps) => React.JSX.Element;
 export default FeedbackTextarea;

package/dist/ui/Survey/FeedbackTextarea.js

@@ -1,35 +1,33 @@
 import React from "react";
 import { MAX_CHARS } from "./constants";
-const FeedbackTextarea = ({ config, feedback, onFeedbackChange, }) => {
+const FeedbackTextarea = ({ config, feedback, onFeedbackChange, colors, }) => {
     if (!config)
         return null;
-    return (React.createElement("div", { style: { marginTop: 16 } },
-        React.createElement("div", { style: {
-                display: "flex",
-                alignItems: "center",
-                gap: 8,
-                marginBottom: 8,
-            } },
-            React.createElement("span", { style: { fontWeight: 700, color: "#111827", fontSize: "13.33px" } }, config.question),
-            React.createElement("span", { style: {
-                    fontSize: 12,
-                    color: "#6B7280",
-                    background: "#F3F4F6",
-                    borderRadius: 6,
-                    padding: "2px 8px",
-                } }, "Opcional")),
+    return (React.createElement("div", { style: { position: "relative", marginTop: 42 } },
+        React.createElement("span", { style: {
+                position: "absolute",
+                left: 16,
+                top: -10,
+                background: "#FFFFFF",
+                padding: "0 8px",
+                fontSize: "13.33px",
+                fontWeight: 600,
+                color: (colors === null || colors === void 0 ? void 0 : colors.primaryColor) || "#374151",
+                zIndex: 1,
+            } }, config.question),
         React.createElement("div", { style: {
                 border: "1.5px solid #E5E7EB",
-                borderRadius: 14,
+                borderRadius: 16,
                 overflow: "hidden",
                 position: "relative",
+                background: "transparent",
             } },
             React.createElement("textarea", { value: feedback, onChange: (e) => {
                     if (e.target.value.length <= MAX_CHARS)
                         onFeedbackChange === null || onFeedbackChange === void 0 ? void 0 : onFeedbackChange(e.target.value);
-                }, placeholder: config.placeholder, rows: 4, style: {
+                }, placeholder: "D\u00E9janos tus comentarios (opcional)", rows: 4, style: {
                     width: "100%",
-                    padding: "12px 12px 28px",
+                    padding: "16px 16px 28px",
                     background: "transparent",
                     color: "#374151",
                     fontSize: "13.33px",
@@ -42,12 +40,12 @@ const FeedbackTextarea = ({ config, feedback, onFeedbackChange, }) => {
             React.createElement("div", { style: {
                     position: "absolute",
                     bottom: 8,
-                    right: 12,
+                    right: 16,
                     fontSize: 12,
                     color: "#9CA3AF",
                 } },
                 feedback.length,
-                " / ",
+                "/",
                 MAX_CHARS))));
 };
 export default FeedbackTextarea;

package/dist/ui/Survey/ScoreButtons.d.ts

@@ -5,6 +5,10 @@ interface ScoreButtonsProps {
     buttonHeight?: number;
     fontSize?: number;
     gap?: number;
+    colors?: {
+        secondaryColor?: string;
+        primaryColor?: string;
+    };
 }
-declare const ScoreButtons: ({ selectedScore, onScoreChange, buttonHeight, fontSize, gap, }: ScoreButtonsProps) => React.JSX.Element;
+declare const ScoreButtons: ({ selectedScore, onScoreChange, buttonHeight, fontSize, gap, colors, }: ScoreButtonsProps) => React.JSX.Element;
 export default ScoreButtons;

package/dist/ui/Survey/ScoreButtons.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { getZoneColor, getZoneShadow } from "./constants";
-const ScoreButtons = ({ selectedScore, onScoreChange, buttonHeight = 54, fontSize = 15, gap = 8, }) => (React.createElement("div", { style: { marginBottom: 4 } },
+const ScoreButtons = ({ selectedScore, onScoreChange, buttonHeight = 54, fontSize = 15, gap = 8, colors, }) => (React.createElement("div", { style: { marginBottom: 4 } },
     React.createElement("div", { style: {
             display: "grid",
             gridTemplateColumns: "repeat(10, 1fr)",
@@ -8,10 +8,11 @@ const ScoreButtons = ({ selectedScore, onScoreChange, buttonHeight = 54, fontSiz
         } }, Array.from({ length: 10 }, (_, i) => i + 1).map((num) => {
         const isSelected = selectedScore === num;
         const zoneColor = getZoneColor(num);
+        const activeColor = (colors === null || colors === void 0 ? void 0 : colors.secondaryColor) || zoneColor;
         return (React.createElement("button", { key: num, onClick: () => onScoreChange === null || onScoreChange === void 0 ? void 0 : onScoreChange(num), onMouseEnter: (e) => {
                 if (!isSelected) {
-                    e.currentTarget.style.borderColor = zoneColor;
-                    e.currentTarget.style.color = zoneColor;
+                    e.currentTarget.style.borderColor = activeColor;
+                    e.currentTarget.style.color = activeColor;
                 }
             }, onMouseLeave: (e) => {
                 if (!isSelected) {
@@ -20,15 +21,18 @@ const ScoreButtons = ({ selectedScore, onScoreChange, buttonHeight = 54, fontSiz
                 }
             }, style: {
                 height: buttonHeight,
-                borderRadius: 14,
+                borderRadius: 10,
                 fontSize,
-                fontWeight: 600,
-                border: isSelected ? "none" : "1.5px solid #E5E7EB",
-                background: isSelected ? zoneColor : "#FFFFFF",
+                border: isSelected ? "none" : "1px solid #E5E7EB",
+                background: isSelected ? activeColor : "#FFFFFF",
                 color: isSelected ? "#FFFFFF" : "#111827",
                 cursor: "pointer",
                 transition: "border-color 0.15s, color 0.15s, background 0.15s",
-                boxShadow: isSelected ? getZoneShadow(num) : "none",
+                boxShadow: isSelected
+                    ? (colors === null || colors === void 0 ? void 0 : colors.secondaryColor)
+                        ? `0 2px 8px ${colors.secondaryColor}58`
+                        : getZoneShadow(num)
+                    : "none",
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
@@ -40,6 +44,6 @@ const ScoreButtons = ({ selectedScore, onScoreChange, buttonHeight = 54, fontSiz
             justifyContent: "space-between",
             marginTop: 8,
         } },
-        React.createElement("span", { style: { fontSize: 12, color: "#9CA3AF" } }, "No es probable"),
+        React.createElement("span", { style: { fontSize: 12, color: "#9CA3AF" } }, "Poco probable"),
         React.createElement("span", { style: { fontSize: 12, color: "#9CA3AF" } }, "Muy probable"))));
 export default ScoreButtons;

package/dist/ui/Survey/constants.d.ts

@@ -1,5 +1,5 @@
 export declare const BRAND = "#E84C0D";
-export declare const MAX_CHARS = 500;
+export declare const MAX_CHARS = 250;
 export type FeedbackConfig = {
     emoji: string;
     message: string;

package/dist/ui/Survey/constants.js

@@ -1,5 +1,5 @@
 export const BRAND = "#E84C0D";
-export const MAX_CHARS = 500;
+export const MAX_CHARS = 250;
 export const getZoneColor = (num) => {
     if (num <= 6)
         return "#E84C0D";

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -21,7 +21,7 @@ const SeatRow = ({ type, index, displayLabel, fare, isSoldOut, seatPriceColor, h
     const priceColor = isSoldOut ? "#bbb" : seatPriceColor;
     return (React.createElement("div", { className: rowClass, key: index },
         React.createElement("span", { className: `min-[420]:text-[13px] ${textSize} `, style: { color: labelColor } }, isTrain
-            ? commonService.truncateSeatLabel(displayLabel, 8)
+            ? commonService.truncateSeatLabel(commonService.capitalize(displayLabel), 8)
             : displayLabel),
         React.createElement("span", { className: `min-[420]:text-[13px] ${textSize}  bold-text`, style: { color: priceColor } }, fare)));
 };

package/dist/ui/mobileweb/ServiceBadgesMobile.d.ts

@@ -3,7 +3,7 @@ interface ServiceBadgesMobileProps {
     showTopLabel?: string;
     isSoldOut: boolean;
     colors: any;
-    renderIcon: (iconKey: string, size?: string) => React.ReactNode;
+    renderIcon: (iconKey: string, size?: string, styles?: any) => React.ReactNode;
     translation?: {
         directService?: string;
     };

package/dist/ui/mobileweb/ServiceBadgesMobile.js

@@ -1,14 +1,14 @@
 import React from "react";
 const ServiceBadgesMobile = ({ showTopLabel, isSoldOut, colors, renderIcon, serviceItem, isConexion, }) => {
-    return (React.createElement("div", { className: "absolute -top-[10px] left-0 w-full flex items-center justify-end gap-[12px] pr-[17px] z-10" },
-        showTopLabel && (React.createElement("div", { className: `flex items-center gap-[2px] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`, style: {
+    return (React.createElement("div", { className: "absolute -top-[12px] left-0 w-full flex items-center justify-end gap-[12px] pr-[17px] z-10" },
+        showTopLabel && (React.createElement("div", { className: `flex items-center gap-[2p x] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`, style: {
                 backgroundColor: "#fff",
                 border: isSoldOut
                     ? "1px solid #ccc"
                     : `1px solid ${colors.topLabelColor}`,
                 color: isSoldOut ? "#ccc" : colors.topLabelColor,
             } },
-            React.createElement("div", { className: isSoldOut ? "grayscale" : "" }, renderIcon("specialDeparture", "12px")),
+            React.createElement("div", { className: isSoldOut ? "grayscale" : "", style: { marginTop: "1px" } }, renderIcon("specialDeparture", "12px", { marginTop: "1px" })),
             React.createElement("div", { style: {
                     color: isSoldOut ? "#ccc" : colors.topLabelColor,
                 } }, showTopLabel))),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kupos-ui-components-lib",
-  "version": "9.9.9",
+  "version": "9.10.0",
   "description": "A reusable UI components package",
   "publishConfig": {
     "access": "public"

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -259,7 +259,7 @@ function ServiceItemPB({
         }
       : {};
 
-  const renderIcon = (iconKey: string, size: string = "14px") => {
+  const renderIcon = (iconKey: string, size: string = "14px", styles?: any) => {
     const iconValue = serviceItem.icons?.[iconKey];
     if (iconValue) {
       if (typeof iconValue === "string") {
@@ -268,6 +268,9 @@ function ServiceItemPB({
             src={iconValue}
             alt={iconKey}
             className={`${`w-[${size}] h-[${size}]`} `}
+            style={{
+              ...(styles || {}),
+            }}
           />
         );
       }
@@ -511,11 +514,11 @@ function ServiceItemPB({
         />
       ) : (
         <div
-          className={`relative hover:z-[150] ${hasOfferText || hasDpEnabled ? "mb-[55px]" : "mb-[10px]"} ${
+          className={`relative hover:z-[150] ${hasOfferText || hasDpEnabled || isNewUiEnabled ? "mb-[55px]" : "mb-[10px]"} ${
             serviceItem?.is_direct_trip ||
             serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
             showTopLabel
-              ? "mt-[24px]"
+              ? "mt-[30px]"
               : "mt-[20px]"
           }	`}
         >

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -148,7 +148,7 @@ function ServiceItemMobile({
     return nodes;
   };
 
-  const renderIcon = (iconKey: string, size: string = "14px") => {
+  const renderIcon = (iconKey: string, size: string = "14px", styles?: any) => {
     const iconValue = serviceItem.icons?.[iconKey];
     if (iconValue) {
       if (typeof iconValue === "string") {
@@ -157,7 +157,10 @@ function ServiceItemMobile({
             src={iconValue}
             alt={iconKey}
             className={`${`w-[${size}] h-[${size}]`} mr-[5px]`}
-            style={{ filter: isSoldOut ? "grayscale" : "" }}
+            style={{
+              filter: isSoldOut ? "grayscale" : "",
+              ...(styles || {}),
+            }}
           />
         );
       }
@@ -225,7 +228,15 @@ function ServiceItemMobile({
             }`}
             style={{ ...serviceCardStyle, backgroundColor: "#fff" }}
           >
-            <div style={{ padding: "12px 12px 8px 12px" }}>
+            <div
+              style={{
+                padding: "12px 12px 8px 12px",
+                marginTop:
+                  serviceItem?.is_direct_trip && showTopLabel && isConexion
+                    ? " 10px"
+                    : "",
+              }}
+            >
               {/* Header with operator info and favorite */}
               <div className="flex justify-between  items-center mb-[10px]">
                 <div

package/src/ui/OfferBanner.tsx

@@ -38,7 +38,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
 }) => {
   return (
     <div
-      className="text-white p-[15px_15px] text-left w-full flex items-center absolute -bottom-[44px] pt-[50px]  rounded-b-[14px] text-[14px] mt-[10px]"
+      className="text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[44px] pt-[50px]  rounded-b-[14px] text-[14px] mt-[10px]"
       style={{
         background:
           serviceItem?.offer_text && !isNewUiEnabled

package/src/ui/SeatSection/SeatSection.tsx

@@ -190,7 +190,10 @@ function SeatSection({
               ? removeDuplicateSeats && isPeru
                 ? CommonService.truncateSeatLabel(val.label)
                 : isTrain
-                  ? CommonService.truncateSeatLabel(val.label, 8)
+                  ? CommonService.truncateSeatLabel(
+                      CommonService.capitalize(String(val.label)),
+                      8,
+                    )
                   : val.label
               : null}
           </span>

package/src/ui/ServiceBadges/ServiceBadges.tsx

@@ -4,7 +4,7 @@ interface ServiceBadgesProps {
   showTopLabel?: string;
   isSoldOut: boolean;
   colors: any;
-  renderIcon: (iconKey: string, size?: string) => React.ReactNode;
+  renderIcon: (iconKey: string, size?: string, styles?: any) => React.ReactNode;
   translation?: {
     directService?: string;
   };
@@ -36,9 +36,11 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
             color: isSoldOut ? "#ccc" : colors.topLabelColor,
           }}
         >
-          <div className={isSoldOut ? "grayscale" : ""}>
-            {renderIcon("specialDeparture", "12px")}
-          </div>
+          {/* <div className={isSoldOut ? "grayscale" : ""}> */}
+          {renderIcon("specialDeparture", "12px", {
+            filter: isSoldOut ? "grayscale(0.5)" : "",
+          })}
+          {/* </div> */}
           <div>{showTopLabel}</div>
         </div>
       )}

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -73,7 +73,10 @@ const SeatRow: React.FC<SeatRowProps> = ({
         style={{ color: labelColor }}
       >
         {isTrain
-          ? commonService.truncateSeatLabel(displayLabel, 8)
+          ? commonService.truncateSeatLabel(
+              commonService.capitalize(displayLabel),
+              8,
+            )
           : displayLabel}
       </span>
       <span

package/src/ui/mobileweb/ServiceBadgesMobile.tsx

@@ -4,7 +4,7 @@ interface ServiceBadgesMobileProps {
   showTopLabel?: string;
   isSoldOut: boolean;
   colors: any;
-  renderIcon: (iconKey: string, size?: string) => React.ReactNode;
+  renderIcon: (iconKey: string, size?: string, styles?: any) => React.ReactNode;
   translation?: {
     directService?: string;
   };
@@ -24,10 +24,10 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
   isConexion,
 }) => {
   return (
-    <div className="absolute -top-[10px] left-0 w-full flex items-center justify-end gap-[12px] pr-[17px] z-10">
+    <div className="absolute -top-[12px] left-0 w-full flex items-center justify-end gap-[12px] pr-[17px] z-10">
       {showTopLabel && (
         <div
-          className={`flex items-center gap-[2px] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`}
+          className={`flex items-center gap-[2p x] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`}
           style={{
             backgroundColor: "#fff",
             border: isSoldOut
@@ -36,8 +36,11 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
             color: isSoldOut ? "#ccc" : colors.topLabelColor,
           }}
         >
-          <div className={isSoldOut ? "grayscale" : ""}>
-            {renderIcon("specialDeparture", "12px")}
+          <div
+            className={isSoldOut ? "grayscale" : ""}
+            style={{ marginTop: "1px" }}
+          >
+            {renderIcon("specialDeparture", "12px", { marginTop: "1px" })}
           </div>
           <div
             style={{