kupos-ui-components-lib 10.4.31 → 10.4.34

package/dist/styles.css

@@ -216,6 +216,9 @@
 .mt-\[0px\] {
   margin-top: 0px;
 }
+.mt-\[1px\] {
+  margin-top: 1px;
+}
 .mt-\[2px\] {
   margin-top: 2px;
 }
@@ -414,6 +417,9 @@
 .h-\[16px\] {
   height: 16px;
 }
+.h-\[17px\] {
+  height: 17px;
+}
 .h-\[18px\] {
   height: 18px;
 }
@@ -435,6 +441,12 @@
 .h-\[58px\] {
   height: 58px;
 }
+.h-\[68px\] {
+  height: 68px;
+}
+.h-\[80px\] {
+  height: 80px;
+}
 .h-\[90px\] {
   height: 90px;
 }
@@ -507,9 +519,15 @@
 .w-\[65\%\%\] {
   width: 65%%;
 }
+.w-\[69px\] {
+  width: 69px;
+}
 .w-\[80\%\] {
   width: 80%;
 }
+.w-\[81px\] {
+  width: 81px;
+}
 .w-\[90px\] {
   width: 90px;
 }
@@ -528,12 +546,18 @@
 .w-\[150px\] {
   width: 150px;
 }
+.w-\[170px\] {
+  width: 170px;
+}
 .w-\[180px\] {
   width: 180px;
 }
 .w-\[188px\] {
   width: 188px;
 }
+.w-\[200px\] {
+  width: 200px;
+}
 .w-\[230px\] {
   width: 230px;
 }
@@ -563,6 +587,12 @@
 .w-px {
   width: 1px;
 }
+.max-w-\[99px\] {
+  max-width: 99px;
+}
+.max-w-\[116px\] {
+  max-width: 116px;
+}
 .max-w-\[120px\] {
   max-width: 120px;
 }
@@ -1084,6 +1114,12 @@
 .pt-\[6px\] {
   padding-top: 6px;
 }
+.pt-\[7px\] {
+  padding-top: 7px;
+}
+.pt-\[8px\] {
+  padding-top: 8px;
+}
 .pt-\[14px\] {
   padding-top: 14px;
 }
@@ -1105,6 +1141,9 @@
 .pt-\[50px\] {
   padding-top: 50px;
 }
+.pr-\[7px\] {
+  padding-right: 7px;
+}
 .pr-\[8px\] {
   padding-right: 8px;
 }
@@ -1150,6 +1189,12 @@
 .pl-\[6px\] {
   padding-left: 6px;
 }
+.pl-\[8px\] {
+  padding-left: 8px;
+}
+.pl-\[10px\] {
+  padding-left: 10px;
+}
 .pl-\[16px\] {
   padding-left: 16px;
 }
@@ -1180,9 +1225,15 @@
 .font-\[\'DMSans-Regular\'\,sans-serif\] {
   font-family: 'DMSans-Regular',sans-serif;
 }
+.text-\[8px\] {
+  font-size: 8px;
+}
 .text-\[9px\] {
   font-size: 9px;
 }
+.text-\[10\.5px\] {
+  font-size: 10.5px;
+}
 .text-\[10px\] {
   font-size: 10px;
 }
@@ -1195,6 +1246,9 @@
 .text-\[12px\] {
   font-size: 12px;
 }
+.text-\[13\.5px\] {
+  font-size: 13.5px;
+}
 .text-\[13\.33px\] {
   font-size: 13.33px;
 }
@@ -1250,10 +1304,30 @@
   --tw-leading: 1.25;
   line-height: 1.25;
 }
+.leading-\[12px\] {
+  --tw-leading: 12px;
+  line-height: 12px;
+}
+.leading-\[13\.5px\] {
+  --tw-leading: 13.5px;
+  line-height: 13.5px;
+}
 .leading-\[14px\] {
   --tw-leading: 14px;
   line-height: 14px;
 }
+.leading-\[15px\] {
+  --tw-leading: 15px;
+  line-height: 15px;
+}
+.leading-\[16px\] {
+  --tw-leading: 16px;
+  line-height: 16px;
+}
+.leading-\[17px\] {
+  --tw-leading: 17px;
+  line-height: 17px;
+}
 .leading-\[20px\] {
   --tw-leading: 20px;
   line-height: 20px;
@@ -1354,6 +1428,9 @@
 .text-\[\#fff\] {
   color: #fff;
 }
+.text-\[\#ffffff\] {
+  color: #ffffff;
+}
 .text-\[white\] {
   color: white;
 }
@@ -1369,6 +1446,10 @@
 .italic {
   font-style: italic;
 }
+.ordinal {
+  --tw-ordinal: ordinal;
+  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+}
 .tabular-nums {
   --tw-numeric-spacing: tabular-nums;
   font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
@@ -1388,6 +1469,9 @@
 .opacity-100 {
   opacity: 100%;
 }
+.opacity-\[0\.65\] {
+  opacity: 0.65;
+}
 .shadow-\[0_1px_4px_rgba\(0\,0\,0\,0\.25\)\] {
   --tw-shadow: 0 1px 4px var(--tw-shadow-color, rgba(0,0,0,0.25));
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1434,6 +1518,11 @@
   transition-timing-function: var(--tw-ease, ease);
   transition-duration: var(--tw-duration, 0s);
 }
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: var(--tw-ease, ease);
+  transition-duration: var(--tw-duration, 0s);
+}
 .transition-transform {
   transition-property: transform, translate, scale, rotate;
   transition-timing-function: var(--tw-ease, ease);

package/dist/ui/DiscountBanners/DiscountBanners.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { DiscountBannersProps } from "./types";
+declare const DiscountBanners: React.FC<DiscountBannersProps>;
+export default DiscountBanners;

package/dist/ui/DiscountBanners/DiscountBanners.js

@@ -0,0 +1,114 @@
+"use client";
+import React, { useMemo, useState } from "react";
+import { deriveDiscountCards } from "./discountUtils";
+import { CAMPAIGN_ART, DEFAULT_BACKGROUND_IMAGES, toImageUrl, } from "./defaultBackgrounds";
+const DEFAULT_LABEL = "Oferta especial";
+const DEFAULT_ACCENT_PALETTE = [
+    "#107E23",
+    "#FFC000",
+    "#0069D1", // blue (descuentos especiales)
+];
+const SIZE_CLASSES = {
+    default: {
+        card: "w-[200px] h-[80px] pt-[8px] pb-0 pl-[10px] pr-[8px]",
+        chip: "w-[81px] h-[17px] text-[9px] leading-[17px]",
+        column: "max-w-[116px] mt-[3px]",
+        discount: "text-[15px] leading-[17px]",
+        subtitle: "text-[12px] leading-[14px] mt-[1px]",
+        flameBadge: "text-[18px] leading-[16px]",
+        flamePercent: "text-[10px]",
+    },
+    compact: {
+        card: "w-[170px] h-[68px] pt-[7px] pb-0 pl-[8px] pr-[7px]",
+        chip: "w-[69px] h-[15px] text-[8px] leading-[15px]",
+        column: "max-w-[99px] mt-[2px]",
+        discount: "text-[13px] leading-[15px]",
+        subtitle: "text-[10.5px] leading-[12px] mt-[1px]",
+        flameBadge: "text-[13.5px] leading-[13.5px]",
+        flamePercent: "text-[8px]",
+    },
+};
+const FLAME_CENTER = { left: "76.8%", top: "56.4%" };
+const REMATE_KEY = "remate";
+function isRemateCard(card) {
+    return card.isWowDeal || card.key === REMATE_KEY;
+}
+const FALLBACK_ART = [
+    { image: DEFAULT_BACKGROUND_IMAGES[1], accent: "#FFC000" },
+    { image: DEFAULT_BACKGROUND_IMAGES[2], accent: "#0069D1" },
+];
+const REMATE_ART = {
+    image: DEFAULT_BACKGROUND_IMAGES[0],
+    accent: "#107E23",
+};
+function resolveArt(cards) {
+    let ordinal = 0;
+    return cards.map((card) => {
+        if (isRemateCard(card))
+            return REMATE_ART;
+        const campaignArt = card.campaignType
+            ? CAMPAIGN_ART[card.campaignType]
+            : undefined;
+        if (campaignArt)
+            return campaignArt;
+        const art = FALLBACK_ART[ordinal % FALLBACK_ART.length];
+        ordinal += 1;
+        return art;
+    });
+}
+const DiscountBanners = ({ services = [], wowDealData, backgroundImages = [], artIncludesChipPill, accentColors = [], label = DEFAULT_LABEL, currencySign = "$", size = "default", selectedKey, defaultSelectedKey = null, onDiscountSelect, className = "", style, }) => {
+    const cards = useMemo(() => deriveDiscountCards(services, wowDealData, currencySign), [services, wowDealData, currencySign]);
+    const [internalSelectedKey, setInternalSelectedKey] = useState(defaultSelectedKey);
+    const isControlled = selectedKey !== undefined;
+    const activeKey = isControlled ? selectedKey : internalSelectedKey;
+    if (!cards.length)
+        return null;
+    const handleCardClick = (card) => {
+        var _a, _b;
+        const nextKey = activeKey === card.key ? null : card.key;
+        if (!isControlled) {
+            setInternalSelectedKey(nextKey);
+        }
+        const selectedCard = nextKey
+            ? ((_a = cards.find((c) => c.key === nextKey)) !== null && _a !== void 0 ? _a : null)
+            : null;
+        onDiscountSelect === null || onDiscountSelect === void 0 ? void 0 : onDiscountSelect(selectedCard, (_b = selectedCard === null || selectedCard === void 0 ? void 0 : selectedCard.matchedServices) !== null && _b !== void 0 ? _b : []);
+    };
+    const usingDefaultArt = !backgroundImages.length;
+    const defaultArt = resolveArt(cards);
+    const chipPillInArt = artIncludesChipPill !== null && artIncludesChipPill !== void 0 ? artIncludesChipPill : usingDefaultArt;
+    const sizeClasses = SIZE_CLASSES[size];
+    return (React.createElement("div", { className: `kupos-discount-banners flex items-stretch gap-[10px] overflow-x-auto [scrollbar-width:none] ${className}`, style: style }, cards.map((card, index) => {
+        const isActive = activeKey === card.key;
+        const isDimmed = activeKey != null && !isActive;
+        const backgroundImage = usingDefaultArt
+            ? defaultArt[index].image
+            : toImageUrl(backgroundImages[index % backgroundImages.length]);
+        const accentColor = accentColors.length
+            ? accentColors[index % accentColors.length]
+            : usingDefaultArt
+                ? defaultArt[index].accent
+                : DEFAULT_ACCENT_PALETTE[index % DEFAULT_ACCENT_PALETTE.length];
+        const isFlameArt = backgroundImage === DEFAULT_BACKGROUND_IMAGES[0];
+        const showFlamePercent = isRemateCard(card) &&
+            isFlameArt &&
+            card.discountType === "percentage" &&
+            card.amount > 0;
+        return (React.createElement("button", { key: card.key, type: "button", "aria-pressed": isActive, onClick: () => handleCardClick(card), className: `relative flex-shrink-0 flex flex-col items-start text-left border-none bg-transparent cursor-pointer bg-no-repeat transition-opacity duration-200 ease-in-out ${sizeClasses.card} ${isDimmed ? "opacity-[0.65]" : "opacity-100"}`, style: {
+                backgroundImage: backgroundImage
+                    ? `url(${backgroundImage})`
+                    : undefined,
+                backgroundSize: "100% 100%",
+            } },
+            React.createElement("span", { className: `bold-text flex-shrink-0 rounded-full text-center text-[#464647] overflow-hidden whitespace-nowrap ${sizeClasses.chip}`, style: chipPillInArt
+                    ? undefined
+                    : { backgroundColor: "rgba(255,255,255,0.55)" } }, label),
+            showFlamePercent && (React.createElement("span", { className: `bold-text absolute text-[#ffffff] text-center pointer-events-none ${sizeClasses.flameBadge}`, style: Object.assign(Object.assign({}, FLAME_CENTER), { transform: "translate(-50%, -50%)", textShadow: "0 1px 2px rgba(0,0,0,0.28)", fontWeight: 900, whiteSpace: "nowrap" }) },
+                card.amount,
+                React.createElement("span", { className: sizeClasses.flamePercent, style: { fontWeight: 700 } }, "%"))),
+            React.createElement("span", { className: `flex flex-col ${sizeClasses.column}` },
+                React.createElement("span", { className: `bold-text text-[#464647] ${sizeClasses.discount}` }, card.discountLabel),
+                React.createElement("span", { className: `bold-text ${sizeClasses.subtitle}`, style: { color: accentColor } }, card.subtitle))));
+    })));
+};
+export default DiscountBanners;

package/dist/ui/DiscountBanners/defaultBackgrounds.d.ts

@@ -0,0 +1,12 @@
+export type ImageRef = string | {
+    src?: string;
+    default?: string | {
+        src?: string;
+    };
+};
+export declare function toImageUrl(art: ImageRef): string;
+export declare const DEFAULT_BACKGROUND_IMAGES: string[];
+export declare const CAMPAIGN_ART: Record<string, {
+    image: string;
+    accent: string;
+}>;

package/dist/ui/DiscountBanners/defaultBackgrounds.js

@@ -0,0 +1,38 @@
+import greenArt from "../../assets/images/discount/green.png";
+import yellowArt from "../../assets/images/discount/yellow.png";
+import blueArt from "../../assets/images/discount/blue.png";
+import lastMinuteArt from "../../assets/images/discount/last.png";
+import firstTimeArt from "../../assets/images/discount/first.png";
+import cashbackArt from "../../assets/images/discount/cash.png";
+import roundTripArt from "../../assets/images/discount/round.png";
+import promoCodeArt from "../../assets/images/discount/promo.png";
+import seatLevelArt from "../../assets/images/discount/seat.png";
+import instantArt from "../../assets/images/discount/instant.png";
+export function toImageUrl(art) {
+    if (typeof art === "string")
+        return art;
+    if (art && typeof art === "object") {
+        if (typeof art.default === "string")
+            return art.default;
+        if (art.default && typeof art.default === "object" && art.default.src) {
+            return art.default.src;
+        }
+        if (art.src)
+            return art.src;
+    }
+    return "";
+}
+export const DEFAULT_BACKGROUND_IMAGES = [
+    greenArt,
+    yellowArt,
+    blueArt,
+].map(toImageUrl);
+export const CAMPAIGN_ART = {
+    last_minute: { image: toImageUrl(lastMinuteArt), accent: "#4457C7" },
+    first_time: { image: toImageUrl(firstTimeArt), accent: "#D63384" },
+    cashback: { image: toImageUrl(cashbackArt), accent: "#0069D1" },
+    round_trip: { image: toImageUrl(roundTripArt), accent: "#5C8A00" },
+    promo_code: { image: toImageUrl(promoCodeArt), accent: "#E08A00" },
+    seat_level: { image: toImageUrl(seatLevelArt), accent: "#B87500" },
+    instant_discount: { image: toImageUrl(instantArt), accent: "#107E23" },
+};

package/dist/ui/DiscountBanners/discountUtils.d.ts

@@ -0,0 +1,3 @@
+import { DiscountBannerCard, DiscountBannerServiceItem, WowDealData } from "./types";
+export declare const CAMPAIGN_TYPE_LABELS: Record<string, string>;
+export declare function deriveDiscountCards(services?: DiscountBannerServiceItem[], wowDealData?: WowDealData, currencySign?: string): DiscountBannerCard[];

package/dist/ui/DiscountBanners/discountUtils.js

@@ -0,0 +1,126 @@
+import CommonService from "../../utils/CommonService";
+const DESCUENTOS_ESPECIALES_KEY = "descuentos_especiales";
+const DESCUENTOS_ESPECIALES_LABEL = "Descuentos especiales";
+const REMATE_KEY = "remate";
+export const CAMPAIGN_TYPE_LABELS = {
+    last_minute: "Última hora",
+    first_time: "Primera compra",
+    cashback: "Cashback",
+    return_booking: "Pasaje de vuelta",
+    round_trip: "Ida y vuelta",
+    early_bird: "Compra anticipada",
+    promo_code: "Código promocional",
+    seat_level: "Descuento por asiento",
+    instant_discount: "Descuento inmediato",
+};
+const ACCENTED_CHARS = {
+    á: "a",
+    é: "e",
+    í: "i",
+    ó: "o",
+    ú: "u",
+    ü: "u",
+    ñ: "n",
+};
+function slugify(text) {
+    return text
+        .trim()
+        .toLowerCase()
+        .replace(/[áéíóúüñ]/g, (char) => { var _a; return (_a = ACCENTED_CHARS[char]) !== null && _a !== void 0 ? _a : char; })
+        .replace(/[^a-z0-9]+/g, "_")
+        .replace(/^_+|_+$/g, "");
+}
+// Dynamic-pricing discounts store one percent per seat type; the best (lowest) one is what's advertised elsewhere in this library
+function getDpPercent(service) {
+    if (!(service === null || service === void 0 ? void 0 : service.is_dp_enabled) || !(service === null || service === void 0 ? void 0 : service.dp_discount_percents))
+        return 0;
+    const values = Object.values(service.dp_discount_percents)
+        .map(Number)
+        .filter((v) => isFinite(v) && v > 0);
+    return values.length ? Math.min(...values) : 0;
+}
+function getServiceDiscount(service) {
+    const dpPercent = getDpPercent(service);
+    if (dpPercent > 0)
+        return { type: "percentage", amount: dpPercent };
+    if ((service === null || service === void 0 ? void 0 : service.discount_type) === "percentage" &&
+        (service === null || service === void 0 ? void 0 : service.discount_value) != null &&
+        service.discount_value > 0) {
+        return { type: "percentage", amount: Number(service.discount_value) };
+    }
+    if ((service === null || service === void 0 ? void 0 : service.discount_type) === "fixed" &&
+        (service === null || service === void 0 ? void 0 : service.discount_value) != null &&
+        service.discount_value > 0) {
+        const rawDiscount = Number(service.discount_value);
+        const { max_discount } = service;
+        const amount = max_discount != null && max_discount > 0
+            ? Math.min(rawDiscount, max_discount)
+            : rawDiscount;
+        return amount > 0 ? { type: "fixed", amount } : null;
+    }
+    return null;
+}
+function toDiscountLabel(discount, currencySign) {
+    if (discount.type === "fixed") {
+        return `${CommonService.currencyRounded(discount.amount, currencySign)} de dcto`;
+    }
+    return `${Math.round(discount.amount)}% de dcto`;
+}
+// Groups services into one card per discount category. Remate/wow-deal is always the first card.
+export function deriveDiscountCards(services = [], wowDealData, currencySign = "$") {
+    var _a, _b;
+    const cards = new Map();
+    const wowServices = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.services;
+    const hasWowDeal = !!wowDealData &&
+        ((Array.isArray(wowServices) && wowServices.length > 0) ||
+            !!wowDealData.savings_percent);
+    if (hasWowDeal) {
+        const remateDiscount = {
+            type: "percentage",
+            amount: Math.round(wowDealData.savings_percent || 0),
+        };
+        cards.set(REMATE_KEY, {
+            key: REMATE_KEY,
+            subtitle: "Remate",
+            discountType: remateDiscount.type,
+            amount: remateDiscount.amount,
+            discountLabel: toDiscountLabel(remateDiscount, currencySign),
+            matchedServices: Array.isArray(wowServices) ? wowServices : [],
+            isWowDeal: true,
+        });
+    }
+    for (const service of services || []) {
+        const discount = getServiceDiscount(service);
+        if (!discount)
+            continue;
+        const campaignType = (_b = (_a = service.discounts) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.campaign_type;
+        const campaignLabel = campaignType
+            ? CAMPAIGN_TYPE_LABELS[campaignType]
+            : undefined;
+        const category = campaignType
+            ? slugify(campaignType)
+            : service.offer_text
+                ? slugify(service.offer_text)
+                : DESCUENTOS_ESPECIALES_KEY;
+        const subtitle = campaignLabel || DESCUENTOS_ESPECIALES_LABEL;
+        const roundedAmount = Math.round(discount.amount);
+        const key = `${category}_${discount.type}_${roundedAmount}`;
+        const existing = cards.get(key);
+        if (existing) {
+            existing.matchedServices.push(service);
+        }
+        else {
+            cards.set(key, {
+                key,
+                subtitle,
+                campaignType,
+                discountType: discount.type,
+                amount: roundedAmount,
+                discountLabel: toDiscountLabel({ type: discount.type, amount: roundedAmount }, currencySign),
+                matchedServices: [service],
+                isWowDeal: false,
+            });
+        }
+    }
+    return Array.from(cards.values());
+}

package/dist/ui/DiscountBanners/index.d.ts

@@ -0,0 +1,5 @@
+export { default as DiscountBanners } from "./DiscountBanners";
+export { deriveDiscountCards, CAMPAIGN_TYPE_LABELS } from "./discountUtils";
+export { CAMPAIGN_ART, DEFAULT_BACKGROUND_IMAGES, toImageUrl, } from "./defaultBackgrounds";
+export type { ImageRef } from "./defaultBackgrounds";
+export type { DiscountBannerCard, DiscountBannerServiceItem, DiscountBannersProps, WowDealData, } from "./types";

package/dist/ui/DiscountBanners/index.js

@@ -0,0 +1,3 @@
+export { default as DiscountBanners } from "./DiscountBanners";
+export { deriveDiscountCards, CAMPAIGN_TYPE_LABELS } from "./discountUtils";
+export { CAMPAIGN_ART, DEFAULT_BACKGROUND_IMAGES, toImageUrl, } from "./defaultBackgrounds";

package/dist/ui/DiscountBanners/types.d.ts

@@ -0,0 +1,49 @@
+import type { CSSProperties } from "react";
+import type { ImageRef } from "./defaultBackgrounds";
+export interface DiscountBannerServiceItem {
+    id?: string | number;
+    offer_text?: string;
+    is_dp_enabled?: boolean;
+    dp_discount_percents?: Record<string, number>;
+    dp_discounted_seats?: string[];
+    discount_type?: string;
+    discount_value?: number;
+    max_discount?: number;
+    discounts?: Array<{
+        new_ui_enabled?: boolean;
+        campaign_type?: string;
+    }>;
+    [key: string]: any;
+}
+export interface WowDealData {
+    savings_percent?: number;
+    services?: any[];
+    final_price?: number;
+    original_price?: number;
+    [key: string]: any;
+}
+export interface DiscountBannerCard {
+    key: string;
+    subtitle: string;
+    campaignType?: string;
+    discountType: "percentage" | "fixed";
+    amount: number;
+    discountLabel: string;
+    matchedServices: DiscountBannerServiceItem[];
+    isWowDeal: boolean;
+}
+export interface DiscountBannersProps {
+    services?: DiscountBannerServiceItem[];
+    wowDealData?: WowDealData;
+    backgroundImages?: ImageRef[];
+    artIncludesChipPill?: boolean;
+    accentColors?: string[];
+    label?: string;
+    currencySign?: string;
+    size?: "default" | "compact";
+    selectedKey?: string | null;
+    defaultSelectedKey?: string | null;
+    onDiscountSelect?: (card: DiscountBannerCard | null, filteredServices: DiscountBannerServiceItem[]) => void;
+    className?: string;
+    style?: CSSProperties;
+}

package/dist/ui/DiscountBanners/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/ServiceBadges/ServiceBadges.js

@@ -40,7 +40,7 @@ const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translatio
             } },
             renderIcon("directo", "12px"),
             React.createElement("div", null, "Tren Express"))),
-        boardingName && isAllinBus && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px]  z-20`, style: {
+        boardingName && isAllinBus && !showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px]  z-20`, style: {
                 backgroundColor: colors.topLabelBgColor || "#fff",
                 border: isSoldOut
                     ? "1px solid #ccc"

package/dist/ui/mobileweb/ServiceBadgesMobile.js

@@ -40,7 +40,7 @@ const ServiceBadgesMobile = ({ showTopLabel, isSoldOut, colors, renderIcon, serv
             } },
             renderIcon("directo", "12px"),
             React.createElement("div", null, "Tren Express"))),
-        boardingName && isAllinBus && (React.createElement("div", { className: `flex items-center gap-[2p x] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] h-[24px] z-20`, style: {
+        boardingName && isAllinBus && !showTopLabel && (React.createElement("div", { className: `flex items-center gap-[2p x] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] h-[24px] z-20`, style: {
                 backgroundColor: colors.topLabelBgColor || "#fff",
                 border: isSoldOut
                     ? "1px solid #ccc"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kupos-ui-components-lib",
-  "version": "10.4.31",
+  "version": "10.4.34",
   "description": "A reusable UI components package",
   "publishConfig": {
     "access": "public"
@@ -13,7 +13,11 @@
       "import": "./dist/index.js",
       "require": "./dist/index.js"
     },
-    "./dist/styles.css": "./dist/styles.css"
+    "./dist/styles.css": "./dist/styles.css",
+    "./assets/images": {
+      "types": "./dist/assets/images/index.d.ts",
+      "default": "./dist/assets/images/index.js"
+    }
   },
   "scripts": {
     "build": "tsc && node build-css.js && node copy-assets.js",
@@ -30,12 +34,21 @@
   "author": "Zahid Dar",
   "license": "MIT",
   "dependencies": {
-    "kupos-ui-components-lib": "^10.4.15",
     "lottie-react": "^2.4.1",
     "lottie-web": "^5.13.0",
-    "moment": "^2.30.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "moment": "^2.30.1"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.11",
@@ -45,6 +58,8 @@
     "file-loader": "^6.2.0",
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "svg-url-loader": "^8.0.0",
     "tailwindcss": "^4.1.11",
     "typescript": "^4.4.4",